清除浮动的4种方法

float会导致父元素塌陷

float具有“破坏性”，它会导致父元素“坍塌”。导致这一现象的最根本原因在于：被设置了float的元素会脱离文档流。

个人理解：“塌陷”在这儿的意思就是，父元素的大小（尺寸）与具有浮动特性的子元素不相关，所以会出现该子元素超出了父元素的范围。

父元素塌陷示例：

代码如下：

<div class="parent1">
  <div class="float-son">float</div>
  <p>兄弟</p>
</div>
<div class="parent1">
  <div class="float-son">float</div>
</div>

.parent1 {
  border: 1px solid blue;
  margin-bottom: 40px;
}
.parent1 .float-son {
  width: 80px;
  height: 80px;
  background: pink;
  float: left;
}

清除浮动

float具有“破坏性”，它会导致父元素“坍塌”，这将不是所要看到的。如何去避免float带来的这种影响呢（也就是我们常说的“清除浮动”） ？

清除浮动有以下方法：

1. 为父元素添加overflow:hidden
2. 浮动父元素
3. clear:both
4. clearfix

1、为父元素添加overflow:hidden

代码如下：

<div class="parent1" style="overflow: hidden;">
  <div class="float-son">float</div>
  <p>兄弟</p>
</div>

2、浮动父元素

代码如下：

<div class="parent1" style="float: left;">
  <div class="float-son">float</div>
  <p>兄弟</p>
</div>

3、clear:both

通过在所有浮动元素下方添加一个clear:both的元素，可以消除float的破坏性。

<div class="parent1">
  <div class="float-son">float</div>
  <div style="clear:both;"></div>
  <p>兄弟</p>
</div>

4、clearfix

这是最需要掌握的方法，也是bootstrap正在用的——clearfix

定义一个.clearfix类，然后对float元素的父元素应用这一样式即可。究其原理，其实就是通过伪元素选择器，在div后面增加了一个clear:both的元素，跟第三种方法是一个道理。

<div class="parent1 clearfix">
  <div class="float-son">float</div>
  <p>兄弟</p>
</div>

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.clearfix {
  *zoom:1;   /* 兼容IE低版本 */
}