CSS浮动清理方法及其原理总结

1 .clearfix:after {
2   content: ".";
3   height: 0;
4   visibility: hidden;
5   display: block;
6   clear: both;
7 }

这一种方法跟上面的原理一样，只不过插入的动作改由CSS来完成。

通过将这个类添加到父容器当中，会在父容器的末尾增加了一个高度为0、具有清除属性的、不可见的块级元素。

再说BFC：

BFC能清理浮动主要运用的是它的布局规则：

1. 内部的Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算

浮动清理利用的主要是第六条规则，只要将父容器触发为BFC，就可以实现包含的效果。

那么触发BFC有哪几种方法？

1. 根元素
2. float属性不为none
3. position为absolute或fixed
4. display为inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不为visible

这里就解释了w3school上面通过对父容器添加overflow: auto;或overflow: hidden;能清理浮动的原因了。

其实就是将父容器触发为BFC，导致其计算高度时将浮动元素的高度计算在内。

明白了这个原理，可以知道对父容器添加position: absolute;或者其他满足触发BFC条件的也可以达到清除浮动的目的。