触发BFC的条件
- float的值不是none
- postiton的值不是absolute或fixed
- display的值是inline-block、text-cell、flex、table-caption或inline-flex
- overflow的值不是visible
- 根元素或其他包含它的元素
BFC特点
- 根元素或默认创建一个BFC
- 每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此。
- 创建BFC的元素不会与浮动元素重叠（清除浮动）
- 容器有足够的剩余空间容纳BFC宽度的时，所有浏览器都会将BFC放置在浮动元素所在行剩余的空间内
- CSS规定，在计算生成了BFC的元素的高度的时候，其浮动子元素应该参与计算
- Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻的box的margin会发生重叠（防止margin重叠）
- BFC就是页面上一个隔离的独立容器，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此 （重要）
