---

为什么要清除浮动

    由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子（由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响）。

清除浮动本质

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

清除浮动的策略：闭合浮动（只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子）

什么是高度塌陷？

    父元素高度自适应，子元素添加浮动后，造成父元素高度为0，称为高度塌陷问题。

为什么会脱标？

    因为所有元素本都是在标准流里布局，即块元素独占一行、行内元素从左到右排列；被添加浮动效果后，不再属于标准流且会脱离标准流（脱标），此元素的位置将不再保留。此时，本被布局在下面的块元素会往上移动，排在右边的行内元素会向左边移动，导致整个布局发生改变。

---

一、清除浮动的语法

书写语法：

选择器 { clear：属性值；}

属性值：

left   不允许左侧有浮动元素（清除左侧浮动的影响）
right  不允许右侧有浮动元素（清除右侧浮动的影响）
both   同时清除左右两侧的影响

二、清除浮动的方法

1.额外标签法

• 额外标签法也称为隔墙法，是W3C推荐的做法
• 额外标签法 就是在最后一个浮动元素末尾添加一个空的额外标签，并添加清除浮动样式。

代码如下（示例）：

<div style="clear:both"></div>
 //或者其他标签（如<br/>等）

注意：要求这个新的标签必须是块级元素

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

2.父级添加 overflow 属性

• 将其属性值设置为 hidden、auto 或 scroll

代码如下（示例）：

 overflow：hidden；

优点	代码简洁
缺点	无法显示溢出部分

3.父级添加 after 伪元素

• :after 是额外标签法的升级版，也是给父元素添加
• 代码写在css里，后面有要清除浮动的话，调用这个代码就可以了

代码如下（示例）：

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

优点	没有增加标签，结构更简单
缺点	照顾低版本浏览器
代表网站	百度、淘宝网、网易等

4.父级添加双伪元素

• :after 和 :before 是额外标签法的升级版，也是给父元素添加
• 代码写在css里，后面有要清除浮动的话，调用这个代码就可以了

代码如下（示例）：

.clearfix:before,
.clearfix:after {
      content:"";
      display:table;
}
.clearfix:after{
      clear:both;
}
.clearfix {
      //IE6、7 专有
      *zoom:1;
}

优点	代码更简洁
缺点	照顾低版本浏览器
代表网站	小米、腾讯等