理解BFC

前期了解

Box、Formatting Context的概念:
Box: CSS布局的基本单位
Formatting context: 页面中的一块渲染区域

Box分类:(css2.1)
block-level box 和 inline-level Box

Box、Formatting Context分类
Block Formatting Context (BFC)
Inline Formatting Context(IFC)

BFC

BFC布局规则(Block Formatting Context)
1.内部的Box会在垂直方向，一个接一个地放置。

2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(普通元素会发生叠加,如果是浮动元素就不会发生元素的叠加)
(不发生折叠的触发因素是浮动元素、inline-block 元素，这个只是创建BFC因素的子集，但并不能说明创建了BFC的元素就不会发生折叠，因为BFC还可以用overflow:hidden来创建。相反如果父元素触发了BFC，那么他的块级子元素反而会发生折叠。参考https://www.zhihu.com/question/19823139)



3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float box重叠。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时，浮动元素也参与计算(可解决浮动元素高度塌陷问题overflow:hidden;)

生成BFC的元素
· 根元素 (一个页面的Html标签应该是唯一的)
· display: inline-block | table-cell | table-caption | flex
· position: absolute | fixed
· overflow: hidden | auto | scroll
· float: left | right

如何使用
不要滥用BFC, 创建BFC的初衷只是为了让元素本身（包括它的子元素）能够正确的计算自己的宽高。