BFC的定义

• BFC块级格式化环境
• BFC是一个CSS中的隐含属性，可以为一个元素开启BFC,开启BFC该元素会变成一个独立的布局区域
• BFC是Web页面的可视CSS渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

元素开启BFC后的特点：

• 开启BFC的元素不会被浮动元素所覆盖
• 开启BFC的元素子元素和父元素外边距不会重叠（结果边距塌陷的问题）
• 开启BFC的元素可以包含浮动的子元素（解决开启浮动而造成的高度塌陷问题）

可以通过一些特殊方式来开启元素的BFC：

1. 设置元素浮动（不推荐）
2. 将元素设置为行内块元素（不推荐）
3. position的值不是static或者relative（不推荐）
4. 将元素的overflow设置为一个非visible的值
   • 常用方式：为元素设置 overflow:hidden 开启其BFC 以使其可以包含浮动元素

BFC的作用

1. 避免边距塌陷（margin塌陷）
   • 给父元素开启BFC
2. 自适应两栏布局（利用BFC的区域不会与float box重叠）
   • 左边开启浮动，宽度确定
   • 右边开启BFC，宽度自适应
3. 清除浮动，解决高度塌陷的问题
   • 父节点开启BFC，子节点开启浮动，此时不会产生高度塌陷的问题