清除浮动

为什么需要清除浮动？

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

清除浮动的策略：闭合浮动。

清除浮动本质

1. 清除浮动的本质是清除浮动元素造成的影响
2. 如果父盒子本身有高度，则不需要清除浮动
3. 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标隹流了

清除浮动方法

1. 额外标签法也称为隔墙法，是W3C推荐的做法
2. 父级添加overflow属性
3. 父级添加after伪元素
4. 父级添加双伪元素

清除浮动-额外标签法

额外标签法也称为隔墙法，是W3C推荐的做法。额外标签法会在浮动元素末尾添加一个空的标签。

例如<div style=” clear:both”></div>，或者其他标签（如<br/>等）。规范语法：

.clear {
     clear:both;     /*先写类名*/
}

<div class="clear"></div>     /*添加空标签，添加到浮动元素的末尾*/

用额外标签法清除浮动

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

注意点：新增清除浮动的盒子要求必须是块级元素，不能是行内元素！举例：

.clear {
     clear:both;     
}

<div class="clear"></div>     /*正确写法，块级元素*/

<span class="clear"></span>  /*错误写法，不能是行内元素 span为行内元素*/

清除浮动-父级添加overflow

可以给父级添加overflow属性，将其属性值设置为 hidden、auto或 scroll。

注意是给父元素添加代码！举例：

.box {
   overflow: hidden;
   width: 800px;
}
.m1 {
    float: left;
    width: 200px;
    height: 200px;
}
.m2 {
    float: left;
    width: 200px;
    height: 200px;
}

<div class="box">
  <div class="m1"></div>     /*父级为box*/
  <div class="m2"></div>     /*父级为box*/
</div>

清除浮动-父级添加after伪元素（常用）

语法：

.clearfix:after{
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
 }

.clearfix {
         *zoom: 1;    /* IE6、7 专有*/
}

实际应用：

.clearfix:after{
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
 }

.clearfix {
         *zoom: 1;
}

.box {
   width: 800px;
}
.m1 {
    float: left;
    width: 200px;
    height: 200px;
}
.m2 {
    float: left;
    width: 200px;
    height: 200px;
}

<div class="box clearfix">     /*父级添加clearfix*/
  <div class="m1"></div>
  <div class="m2"></div> 
</div>

用after伪元素清除浮动

• 优点：没有增加标签，结构更简单
• 缺点：照顾低版本浏览器

清除浮动-双伪元素清除浮动

也是给父元素添加。语法：

.clearfix:before,.clearfix:after{
   content:"";
   display:table;
}
.clearfix:after{
  clear:both;
}
.clearfix{
  *zoom:1;
}