概念：

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的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠，实现了自适应两栏布局