BFC 布局规则以及触发条件

BFC，块格式化上下文，是一个独立的渲染区域，决定了块级元素如何对它的内部进行布局，以及与其他元素的关系

解释

块级元素：父级（块元素）
内容：子元素（块元素）
其它元素：与内容元素同级别
相互作用：BFC的内部元素与其他元素毫不相干

触发条件

触发BFC的方式：

1. float 值不为 none;
2. overflow 的值不为 visible;
3. position 的值 不为 static 或者 relative 中的任何一个;
4. display 的值为 table-cell, table-caption, inline-block;

BFC规则

1. 内部的Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。你要避免相邻块元素外边距重叠的话，那你就要避免产生BFC。
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算

区别

BFC	普通文档流
浮动的元素会被父级计算高度(父级触发BFC)	浮动的元素不会被父级计算高度
非浮动元素不覆盖浮动元素的位置(非浮动元素触发 BFC)	非浮动元素会覆盖浮动元素的位置
margin 不会传递给父级(父级触发了BFC）	margin 会传递给父级
两个相邻元素的上下 margin 不会重叠	两个相邻元素的上下 margin 会重叠

BFC应用

• 清除浮动
• 防止 margin 重叠
• 多栏布局的一种方式