理解 四种清除浮动的方法

用 clear 样式，对指定元素进行清除浮动操作：

<div class="divclear"></div>

.divclear {
  clear: both;  // both这个属性是两侧清除，还有左边或右边（left, right）
}

这是简单的对指定元素进行清除浮动操作，这样的清除浮动，只关心指定元素，使该元素的两侧不出现其他浮动。并不关心其他类似“父盒子高度支撑”的问题。

父元素结束标签之前插入一个清除浮动的块级元素：


<div class="topDiv">
    <div class="textDiv">...</div>
    <div class="floatDiv">float left</div>
    <div class="blankDiv"></div>
</div>

.blankDiv {
    clear: both;
}

这样的处理等于，是给父元素的结束标签之前增加了一个“块级元素”，然后给这个“块级元素”赋予clear的属性，帮助父盒子清除浮动，并且支撑起来了父盒子的高度。

利用添加伪元素清除浮动：

<div class="divclear clearfix"></div>

　　display: block;
　　clear: both;
　　height: 0;
}

这个方法其实类似于第二个给父元素结束标签前增加“块级元素”，都是利用新增块级元素的方式去清除浮动，并且支撑父盒子高度。

利用 overflow 清除浮动：

当元素设置了overflow样式，且值不为visible时，该元素就建构了一个BFC（块级格式化上下文），所谓BFC有个特点，就是BFC的高度是要包含浮动元素的，
所以，给父元素设置了 overflow：auto 的属性后，该父元素的高度就被撑起来了。