CSS 清除浮动---增加了一种新办法哦

1，利用:after伪元素
.clearfix:after {

    clear: both;

    content: ".";

    display: block;

    height: 0;

    visibility: hidden;

}
2，现在我们知道了BFC--block formatting context--块级格式化上下文

如何触发 BFC

触发 BFC 的条件如下：

• 浮动元素，float 除 none 以外的值
• 绝对定位元素，position（absolute，fixed）
• display 为以下其中之一的值 inline-blocks，table-cells，table-captions
• overflow 除了 visible 以外的值（hidden，auto，scroll）

在 CSS3 中，BFC 叫做 Flow Root，并增加了一些触发条件：

• display 的 table-caption 值
• position 的 fixed 值，其实 fixed 是 absolute 的一个子类，因此在 CSS2.1 中使用这个值也会触发 BFC ，只是在 CSS3 中更加明确了这一点。

BFC特性：

(1) BFC 会阻止外边距折叠 --解决常见的外垂直边距折叠（这不应该是bug吧，应为主流浏览器都默认边距折叠）

(2) BFC 可以包含浮动的元素--解决父容器因为子元素浮动高度塌陷

(3) BFC 可以阻止元素被浮动元素覆盖--解决左右两列浮动，两列都要设置宽度的猥琐现实

看到以上，结合实际，得出的结论就是，产生影响最微小的就是overflow:hidden。
结合语义化的要求，在实际的项目中，建议可以使用 overflow 方法或 :after 伪元素方法。使用 overflow 方法，较为方便，在如内部元素全部为浮动元素，并且内容不会超出父元素框等情况可以直接采用 overflow 方法，但该方法毕竟会触发 BFC ，上面已经提到，BFC 的特性是有多个的，为了避免不必要的影响，如果实际需要清除浮动元素的布局比较复杂，可以直接采用 :after 伪元素方法。