BFC解决边距折叠
2020-04-13
什么是边距折叠
当块级元素（block）的上外边距(margin-top)和下外边距(margin-bottom)同时都有设定时只会只会保留最大边距，这种行为称为外边距折叠（margin collapsing)。查看官方文档
比如: margin-bottom: 40, margin-top: 20, 边距为正取大值，最后 两个元素之间边距 40 margin-bottom: 40, margin-top: -20, 最后 两个元素之间边距 40 - 20 = 20 margin-bottom: -40 margin-top: -20 边距为负取小值，最后 两个元素之间边距 -40
BFC 解决边距折叠
BFC (block formatting context) 块级格式化 文档
何为 BFC ，只要元素满足下面任一条件即可触发 BFC 特性：
- body 根元素
<html> - 浮动元素：float 不为 none 的属性值
- 绝对定位：position: absolute 或 fixed
- display 为： inline-block、table-cells、flex 、grid
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
BFC 的布局规则：
- 内部的盒子会在垂直方向，一个个地放置；
- BFC 是页面上的一个隔离的独立容器；
- 属于同一个 BFC 的 两个相邻 Box 的 上下 margin 会发生重叠 ；
- 计算 BFC 的高度时，浮动元素也参与计算
- BFC 的区域不会与 float 重叠；
BFC 还可以干什么
- BFC 可以包含浮动的元素（清除浮动）
See the Pen clear-float by Mary (@maxxiaobao) on CodePen.
- 阻止元素被浮动元素覆盖
把 overflow: hidden 注释后，便可发现左侧的红盒子底下右侧 div 的灰色背景被覆盖。
See the Pen example2 by Mary (@maxxiaobao) on CodePen.