BFC相关知识点

定义

BFC(Block formating context) 直译为“块级格式化上下文”。指页面中的渲染区域，并且拥有一套渲染规则，它决定了其子标签如何定位，以及与其他标签的相互关系和作用。

如何生成BFC

1 根元素（比如html）
2 float的值为left或者right
3 overflow的值为hidden或者scroll或者auto
4 display 的值为inline-block
5 position 为absolute或者fixed

BFC的特性

1 内部的标签会在垂直方向上一个接一个的放置
2 垂直方向上的距离有margin决定，属于同一个BFC的两个相邻的标签的margin会发生重叠
3 每隔标签的左外边距与包含块（即父元素）的左外边界相接触（从左向右），即使浮动标签，也是如此。
4 BFC的区域不会与float的标签区域重叠
5 计算BFC的高度的时候，浮动子元素也参与计算
6 BFC就是页面上一个隔离的独立容器，容器里面的元素不会影响外面，反之亦然。

BFC的主要用途

1 外边距重叠
2 自适应两栏或者三栏布局
3 防止字体环绕
4 清除浮动