CSS—清除浮动和BFC

清除浮动的常用三种方式
一、clear：both /left  /right  /none  /inherit
分别代表在元素左右两侧不允许出现浮动元素/左侧不允许出现浮动元素/右侧不允许出现浮动元素/不清除浮动/继承父元素的值
这只是清除了浮动对于兄弟元素的影响

二、overflow：hidden / auto
在浮动元素的父元素上设置了 overflow 的值为 hidden 或 auto ，可以闭合浮动。
清除浮动对父元素的影响

三、：after 伪元素

这个办法不但完美兼容主流浏览器，并且也很方便，使用重用的类，可以减轻代码编写，另外网页的结构也会更加清晰。
具体参考：kayosite.com/remove-floating-style-in-detail.html 

---

BFC
一. BFC 是什么？
简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用

具有 BFC 的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC具有普通容器没有的一些特性，例如可以包含浮动元素，上文中的第二类清除浮动的方法（如 overflow 方法）就是触发了浮动元素的父元素的 BFC，使到它可以包含浮动元素，从而防止出现高度塌陷的问题。

二.如何触发 BFC

上面介绍了 BFC 的定义，那么如何触发 BFC 呢？

满足下面任一条件的元素，会触发为 BFC ：

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

三. BFC 的特性

从整体上看，BFC 是隔离了的容器，这个具体可以表现为三个特性：

1. BFC 会阻止外边距折叠（margin collapse）

2. BFC 可以包含浮动的元素

3. BFC 可以阻止元素被浮动元素覆盖

具体参考：kayosite.com/block-formatting-contexts-in-detail.html