清除浮动

清除浮动

为什么要清除浮动

• 当父盒子没有设置高度（为了后期维护和扩展，不方便设置高度）,而父盒子里面的子盒子浮动了，此时，影响了下面的布局，我们就应该清除浮动。
• 清除浮动是为了清除浮动元素脱离标准流后对后续标准流造成的影响。

清除浮动的策略

• 闭合浮动.只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子。

清除浮动的方法

1. 额外标签法。
2. 父级元素添加overflow属性。
3. :after伪元素法。
4. 双伪元素清除浮动（推荐使用）。

一.  额外标签法

• 额外标签法也称为隔墙法，是W3C推荐的做法。
• 在浮动的元素后面加上一个空的块级元素，（注意，不能是行内元素）然后设置属性。

 <div style="clear: both"></div>

• 注意：其中clear属性的取值有三个，分别是：left 、right、both。含义如下：

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

二.  父级添加overflow属性

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

   overflow: hidden;

• 注意：要给浮动元素的父级盒子添加overflow属性。

三.  :after伪元素法

• :after方式是额外标签法的升级版，也是给浮动盒子元素后面加一个块级元素，只不过是用CSS伪类实现的。也是给父元素添加属性。

  .clearfix:after {
      content : "";
      display: block;
      height: 0;
      clear : both;
      visibility: hidden;
  }
  .clearfix {
       /*IE6、7专有*/
      *zoom: 1;
  }

• 写好如上的CSS样式后，直接给浮动元素的父元素添加**class=“clearfix”**类就可以了，注意，这里的类名不一定是clearfix，只不过是界内约定俗成的规范，遵守就可以了。
• 优点：没有增加标签，结构更简单。
• 缺点：需要照顾低版本的浏览器。

四.  双伪元素清除浮动（推荐使用）

• 双伪元素清除浮动也是给浮动盒子元素加块级元素，只不过它在浮动元素前后各加了一个块级元素。也是给给父元素添加属性。

  .clearfix:before,
  .clearfix:after {
      content: "";
      display: table;
  }

  .clearfix:after {
      clear: both;
  }

  .clearfix {
      *zoom: 1;
  }

• 写好如上CSS样式后直接给浮动元素的父元素添加**class=“clearfix”**类就可以了，和:after伪元素法做法相同。