【 BFC 详解】

BFC 是什么

块级格式化上下文，页面中的一块渲染区域，并有一套自己的渲染规则

在这个规则中设定好了元素应该如何对齐，以及当前元素与其他元素内容是什么关系，当涉及可视化布局的时候，BFC就提供了一个环境，html 元素在这个环境中按着上述规则进行布局即可

BFC 规则

1、内部盒子会在垂直方向上一个一个放置
2、盒子垂直方向上的 距离由margin决定，若两个盒子属于同一个BFC，相邻的两个盒子margin会合并
3、每个元素左边与包含盒子的左边相接触，即使存在浮动也是如此
4、BFC的区域不会与浮动的 box 相接触
5、计算 BFC 的高度时，浮动元素也要参与计算（清除浮动）

其实就是具备了某些特性的盒子

如何获取一个 BFC

html body 根元素本身就是一个 BFC （区域）
float 属性值不为 none 时，
overflow: auto scroll hidden
display: inline-block table-caption table-cell
position: absolute fixed

BFC 的作用

让内容等高；
外边距合并

1. body作为根元素是一个 BFC 区域，在他的渲染规则中存在垂直方向上的边距合并
2. 解决思路，将上或下盒子放在一个 BFC 区域中，两个 BFC 之间互不干扰

BFC 清除浮动，使其成为一个 BFC 区域

自适应两列布局，一列写死另一列自适应，BFC 不会和浮动产生重叠，使自适应盒子成为 BFC 区域