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带来的这种影响呢（也就是我们常说的“清除浮动”） ？
清除浮动有以下方法：
- 为父元素添加overflow:hidden
- 浮动父元素
- clear:both
- 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低版本 */
}