清除浮动的方法

1.原因

父元素不加高度,则父元素的高度会随着子元素的高度而变化,如果多个子元素都浮动了,又父元素没有高度,则父元素的高度就是0,浮动的盒子不能把父元素撑起来,所以下面的非浮动的盒子就会占据浮动的子元素的下方,造成盒子的重叠.

2.清除浮动的本质:

就是为了解决因为子元素浮动引起的父元素高度为0的问题.让父元素闭合出入口,不让浮动的元素出来.以致影响别的盒子.

3. 浮动清除的css

选择器 {clear:  属性值; }  (属性值包括 both (清除左右浮动) , left  (清除左浮动), right (清除右浮动))

4.清除浮动的四种方法

1) 在浮动元素的后面,同时也是在父元素的里面添加一个空标签 ,只有class属性中的clear:both; 如下所示:

<div>//父元素
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="clear:both;"></div>//空标签
</div>
缺点:增加了无意义的标签,很少用这种方式

2) 在父元素的css样式中增加overflow:hidden;  auto也行

缺点:内容增多容易造成不自动换行导致内容被隐藏

3) (常用,重要) 对1方法额外标签法的升级,  在父元素中使用伪元素选择器的E::after

<style>
    .clearfix::after {
     display:block;
     content: ".";//这个content中写什么都行,简单的写一个小点即可,尽量加,不要空,否则会显示出来
    height: 0;//高度为0 ,不让小点把盒子撑开
    visibility: hidden;//隐藏该盒子
    clear: both;   
 }
.clearfix {
   *zoom: 1;
}

</style>

4) before after 双伪元素选择器

<style>
 .clearfix::before, .clearfix::after {
    content: "";
    display: table; //触发bfc防止waiter边距合并
}
.clearfix::after{ clear: both; }
.clearfix {*zoom: 1;} //带有*的属性只有ie6或7才执行,zoom是ie6,7 清除浮动的方法
</style>