块格式化上下文
什么是块格式化上下文？
块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视化 CSS 渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
可以将 BFC 通俗理解为一个独立的布局环境，BFC 内的元素不会影响外部其他元素的布局。且当一个元素被某些条件触发变为 BFC 后，BFC 内的元素布局将不受外界影响，视 BFC 为根元素。
块格式化上下文的创建方式
- 根元素（
<html>）
- 浮动元素（元素的
float不是none）会创建 BFC，浮动元素内部子元素布局主要受该浮动元素影响，所以两个浮动元素之间是互不影响的
- 绝对定位元素（元素的
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不为auto，包括column-count为1）
column-span为all的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中。
外边距重叠
什么是外边距重叠？
有时相邻块的下外边距和上外边距会重叠为单个边距，这种现象叫作外边距重叠。
外边距折叠的三种情况
1. 直接相邻的两个元素间
相邻的两个元素之间的外边距重叠：
可见蓝绿方块之间边距为 50px，而非两外边距之和 100px，外边距发生了折叠。
2. 没有内容将父元素和后代元素分开
如果没有边框
border，内边距 padding，行内内容，也没有创建 BFC 或清除浮动来分开一个块级元素的上边界 margin-top 与其内一个或多个后代块级元素的上边界 margin-top；或没有边框，内边距，行内内容，高度 height，最小高度 min-height 或最大高度 max-height 来分开一个块级元素的下边界 margin-bottom 与其内的一个或多个后代后代块元素的下边界 margin-bottom，则就会出现父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。可见
<section> 元素与界面上边框距离不等于其自身上边界 50px，而等于其子元素 <div> 的上边界100px，这是因为 <div> 的上边界出现了溢出。3. 空的块级元素
当一个块元素上边界
margin-top 直接贴到元素下边界 margin-bottom 时也会发生边界折叠。这种情况会发生在一个块元素完全没有设定边框 border、内边距 padding、高度 height、最小高度 min-height 、最大高度 max-height 、内容设定为 inline 或是加上 clear-fix 的时候。横线与顶部距离不等于空元素的上下边距之和 150px，而等于更大的下边距 100px，可见出现了外边距重叠。
一些需要注意的地方：
- 上述情况的组合会产生更复杂的外边距折叠。
- 即使某一外边距为 0，这些规则仍然适用。因此就算父元素的外边距是 0，第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。
- 如果参与折叠的外边距中包含负值，折叠后的外边距的值为最大的正边距与最小的负边距（即绝对值最大的负边距）的和。如有 -13px 8px 100px 叠在一起，边距就是 100px-13px 的 87px。
- 如果所有参与折叠的外边距都为负，折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。
外边距重叠的防止方法
- 直接相邻的两个元素间：对元素设定设定
float或position: absolute；
- 没有内容将父元素和后代元素分开：创建边框
border，内边距padding，行内内容；或创建 BFC 抑或是清除浮动来分开一个块级元素的上边界margin-top与其内一个或多个后代块级元素的上边界margin-top；或创建边框，内边距，行内内容，高度height，最小高度min-height或最大高度max-height来分开一个块级元素的下边界margin-bottom与其内的一个或多个后代后代块元素的下边界margin-bottom；
- 空的块级元素：避免元素上边界
margin-top直接贴到元素下边界 。