CSS 清除浮动

1、浮动的缺陷

影响它的兄弟元素的位置和父元素产生高度塌陷（父元素不被撑开）。

（1）影响它的兄弟元素的位置

未设置float

给box1设置float后,box2的位置发生了变化。

（2）父元素产生高度塌陷

给子元素box1设置了float,父元素container高度不被撑开（视觉上高度产生了塌陷）。

2、浮动的清除方法

（1）使用 :after伪元素（常用）

修改：height：0px;visibility:hidden;省略即可

（2）在浮动元素后加空div

（3）父元素设置overflow：hidden

只是 overflow 并不是为了闭合浮动而设计的，因此当元素内包含会超出父元素边界的子元素时，可能会覆盖掉有用的子元素，或是产生了多余的滚动条。这也是在 overflow 方法诞生后依然需要寻找更佳方法的原因。

（4）......

3、清除浮动各种方法的实质

（1）利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。

（2）触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素