BFC（margin折叠和高度塌陷）

FC

全称Formatting Context格式化上下文，元素在标准流里都是属于一个FC的。
块级元素的布局属于Block Formatting Context（BFC）：block level box都是在BFC中布局的。
行内级元素的布局属于Inline Formatting Context（IFC）：inline level box都是在IFC中布局的。

BFC

MDN
是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
有如下特点：

1. 在BFC中，box会在垂直方向上一个挨着一个的布局
2. 垂直方向的间距由margin决定
3. 在同一个BFC中，相邻两个box之间的margin会折叠（垂直方向）
4. 在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的

可以利用以上特点解决两个问题：

1. 解决margin折叠问题，这一点没什么好说的，通过第二个特点就知道让折叠的两个元素属于不同的BFC即可。
2. 解决浮动高度塌陷问题

解决浮动高度塌陷

BFC解决高度塌陷需要满足两个条件：

1. 浮动元素的父元素触发BFC，形成独立的BFC。
2. 浮动元素的父元素的高度是auto

BFC的高度是auto的情况下，按一下方法计算高度：

1. 如果只有inline-level，是行高的顶部和底部的距离；
2. 如果有block-level，是由最底层的块上边缘和最底层块盒子的下边缘之间的距离；
3. 如果有绝对定位元素，将被忽略；
4. 如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘；

以下情况会创建BFC

• 根元素（）
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
• 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
• 匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
• overflow 计算值(Computed)不为 visible 的块元素
• display 值为 flow-root 的元素
• contain 值为 layout、content 或 paint 的元素
• 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
• 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
• 多列容器（元素的 column-count 或 column-width(en-US) 不为 auto，包括 column-count 为 1）
• column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

参考

coderwhy的课件分享