BFC协议
html盒子模型的BFC规则，如何创建BFC
什么是BFC？BFC的布局规则是什么？如何创建BFC？
查看解析
Box 是 CSS 布局的对象和基本单位，页面是由若干个Box组成的。
元素的类型 和
display属性，决定了这个 Box 的类型。不同类型的 Box 会参与不同的 Formatting Context。Formatting Context
Formatting Context 是页面的一块渲染区域，并且有一套渲染规则，决定了其子元素将如何定位，以及和其它元素的关系和相互作用。
Formatting Context 有 BFC (Block formatting context)，IFC (Inline formatting context)，FFC (Flex formatting context) 和 GFC (Grid formatting context)。FFC 和 GFC 为 CC3 中新增。
BFC布局规则
- BFC内，盒子依次垂直排列。
- BFC内，两个盒子的垂直距离由
margin属性决定。属于同一个BFC的两个相邻Box的margin会发生重叠【符合合并原则的margin合并后是使用大的margin】 - BFC内，每个盒子的左外边缘接触内部盒子的左边缘（对于从右到左的格式，右边缘接触）。即使在存在浮动的情况下也是如此。除非创建新的BFC。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算。
如何创建BFC
根元素##
- 浮动元素（float 属性不为 none）
- position 为 absolute 或 fixed
- overflow 不为 visible 的块元素
- display 为 inline-block, table-cell, table-caption
BFC 的应用
- 防止 margin 重叠 (同一个BFC内的两个两个相邻Box的
margin会发生重叠，触发生成两个BFC，即不会重叠) - 清除内部浮动 (创建一个新的 BFC，因为根据 BFC 的规则，计算 BFC 的高度时，浮动元素也参与计算)
- 自适应多栏布局 (BFC的区域不会与float box重叠。因此，可以触发生成一个新的BFC)
