概念：
BFC：块格式化上下文是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域
BFC的创建条件
- 根元素：body
- 元素设置浮动：float除了none以外的值
- 元素设置绝对定位：position设置为absolute
或fixed - display设置为inline-block、table-cell、table-caption、flex等
- overflow设置为hidden、auto、scroll
BFC的特点
- 垂直方向上，自上而下排列，和文档流的排列方式一致
- 在BFC中上下相邻的的两个容器的margin会重叠
- 计算BFC的高度时，需要计算浮动元素的高度
- BFC区域不会与浮动的容器发生重叠
- BFC是独立的容器，容器内部元素不会影响外部元素
- 每个元素的margin-left值和容器的border-left相接处
BFC的作用
- 解决margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题
- 解决高度塌陷的问题：对子元素设置浮动后，父元素会发生高度塌陷，即height变为0。只需将父元素变成一个BFC即可，常用的办法是给父元素设置overflow:hidden
- 创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。左侧设置float:left，右侧设置overflow: hidden。这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠，实现了自适应两栏布局