清除浮动

为什么要清除浮动？

有些情况父级盒子不方便给高度，但是子盒子浮动后就不占页面位置，如果不给父级盒子高度，父级盒子高度高度为0，就会影响下面标准流盒子的布局。

清除浮动的目的就是为了解决父级盒子因为子级盒子浮动引起内部高度为 0 的问题。清除浮动之后，父级盒子的高度就会根据浮动子盒子的高度自动调整。

清除浮动的方法

额外标签法（W3C推荐的做法）

1. 在CSS中，clear属性用于清除浮动，其语法为：

选择器 {clear:属性值;}

在实际开发中，几乎只用 clear:both;

1. 使用方法，在浮动元素末尾添加一个空的标签，并为其添加 clear 属性。例如：<div style=”clear:both”>
2. 一个实例：

  <div style="border: 1px solid black;"> 
        <div style="float: left; width: 100px; height: 100px; background-color: skyblue;"></div>
        <div style="float: left; width: 200px; height: 200px; background-color: blue;"></div>
        <div style="clear: both;"></div>
    </div>

1. 优点和缺点：
   • 优点： 通俗易懂，书写方便。
   • 缺点： 添加许多无意义的标签，结构化较差。

给父级添加overflow属性

给父级元素添加：
 overflow：hidden;（推荐）
 overflow：auto;
 overflow：scroll;
 其中之一都可以实现。

优点：代码简洁。

缺点：内容增多时候不会自动换行导致内容被隐藏掉，无法显示溢出盒子的元素（或添加滚动条，难看）。

使用after伪元素清除浮动

after伪元素方法相当于额外标签法的升级版，好处是没有添加无意义的标签。其语法为：

声明清除浮动样式：
.clearfix:after {  content: ""; 
                                      display: block; 
                                   height: 0; 
                                   clear: both; 
                                 visibility: hidden; 
}   
.clearfix {*zoom: 1;}   /* IE6、7 专有 */

父级元素调用清除浮动样式：
<div class="clearfix"></div>

优点：不添加额外的无意义标签，语义结构化较好。

缺点：由于IE6、7不支持:after，使用 zoom:1触发hasLayout。

使用双伪元素清除浮动

语法为：

声明清除浮动样式：
.clearfix:before,
.clearfix:after { 
      content:"";
      display:table; 
}
.clearfix:after {
     clear:both;
}
.clearfix {
      *zoom:1;
}

父级元素调用清除浮动样式：
<div class="clearfix"></div>

清除浮动总结