什么是 BFC

1、讲 BFC 之前，先了解有哪些文档流

• 普通流

• 块状元素都会在包含元素内自上而下按顺序堆叠分布。在默认状态下，块状元素的宽度为100%，占据一行显示，不管这个元素是否包含内容，宽度是否为100%
• 行内元素都会在包含元素内从左到右水平分布显示，类似于文本流，超出一行后会自动换行显示，然后继续从左到右按顺序流动，以此类推

• 定位流（绝对定位）

元素会整体脱离普通流

• 浮动流

元素首先按照普通流的位置显示，然后根据浮动的方向尽可能的向左或向右边便宜

2、BFC 是什么

BFC 属于普通流，是一个独立的区域，渲染规则和外部无关

特点：

• 垂直方向上，自上而下排列，和文档流的排列方式一致
• 在BFC中上下相邻的两个容器的 margin 会重叠
• 计算BFC的高度时，需要计算浮动元素的高度
• BFC区域不会与浮动的容器发生重叠
• BFC是独立的容器，容器内部元素不会影响外部元素
• 每个元素的左 margin 值和容器的左 border 相接触

3、BFC产生的方法

• 根元素：body；
• 元素设置浮动：float 除 none 以外的值；
• 元素设置绝对定位：position (absolute、fixed)； 非 relative
• display 值为：inline-block、table-cell、table-caption、flex等；
• overflow 值为：hidden、auto、scroll；非 visible

4、BFC 能解决什么问题 

• 解决 margin 重叠问题
• 解决高度塌陷的问题（清除浮动）
• 阻止元素被浮动元素覆盖