CSS中的BFC
BFC的定义
块格式化上下文（Block Formatting Context，BFC），指的是页面上一个独立的渲染区域或者说一个独立的容器，这块区域中的元素不会影响到外面的元素，反之外面的元素也不会影响到BFC里的元素。
具体概念可以参考MDN的解释
创建BFC的条件
MDN中列举了详细的形成条件
这里主要总结了几种常用的：
- 浮动元素（元素的 float 不是 none）
- 绝对定位元素（元素的 position 为 absolute 或 fixed）
- display 为以下值之一 inline-block，table-cell，table-caption
- overflow 不为 visible 的块元素
BFC的主要特性
- 垂直方向上元素的距离由他们的外边距(margin)决定，BFC之间不会发生margin折叠
- BFC的区域不会和float的元素区域重叠
- BFC区域中的元素与外面的元素互不影响
- BFC包含创建它的元素内部的所有内容（计算BFC的高度时会包含float元素的高度）
BFC的应用
解决块元素间的margin折叠问题
- 子元素margin穿透，子元素的margin会穿透至父元素，影响父元素的表现。
解决思路：父元素创建BFC
- 子元素之间的margin会折叠，子元素间的间距会以较大的margin为主。
解决思路：让子元素之一处于BFC中，与其他子元素隔离
实现：codepen
三栏布局
- 左右两侧区域宽度固定，中间区域宽度自适应。
解决思路：左右两侧侧元素浮动；中间元素创建BFC（不受浮动元素影响）
实现：codepen
解决文字环绕浮动元素
- 问题：浮动的元素会遮盖下面的元素，下面元素里的文字不会被遮盖，文字会环绕浮动的元素。
解决思路：下面的元素创建BFC
实现：codepen