彻底理解BFC
BFC 究竟是什么？
BFC（Block Formatting Context ），块级格式化上下文，他是一个独立的、隔离的渲染区域，内部元素不会影响到外部。
BFC的三个特性：
- 内部外边距不会对外部产生影响
- 内部可以包含浮动元素
- BFC不与外部元素重叠
哪些情况会触发BFC？
- 根元素：html就是最大的BFC
- 浮动：float不为none
- 绝对定位：position为absolute或fixed
- 行内块元素：display: inline-block
- 表格单元格和表格标题：display:table-cell/table-caption
- 溢出非可见：overflow不为visible，最常用的overflow: hidden
- 弹性/网格元素：display: flex、display: inline-flex、display: grid、display: inline-grid 的直接子元素
最常见的方式：
- overflow：hidden，副作用最小
- display：flex
- display：inline-block
BFC可以解决什么问题？
- 浮动元素的父元素高度塌陷问题
问题：子元素浮动后，父元素高度为0，背景色或边框无法包裹。
解决：设置父元素overflow：hidden - 兄弟元素外边距重叠问题
问题：两个兄弟元素，上面的 margin-bottom: 50px，下面的 margin-top: 20px，最终间距只有 50px（取大值），而不是 70px。
解决：给一个兄弟元素外面加一个BFC包裹起来 - 实现自适应两栏布局（圣杯布局、双飞翼布局）
问题：左侧固定宽度浮动，右侧自适应宽度，且不重叠。
解决：不浮动的元素overflow：hidden，使其成为一个BFC，这样就不会影响外部浮动元素了