关于BFC及其应用

参考掘金网易考拉团队的文章

BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。块格式上下文是页面CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。

BFC的创建方法：
1.根元素或其他包含他的元素
2.浮动（float不为none）
3.绝对定位元素（position为absolute或者fixed）
4.行内块（元素为inline-block）
5.表格单元格（display:table-cell）
6.overflow的值不为visible
7.弹性盒：display :flex

BFC的作用：
1.内部的盒会在垂直一个个排列
2.处于同一个BFC的元素互相影响，可能会发生边缘折叠
3.每个元素的marginbox的左边与容器块的borderbox的左边相接触
4.让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
5.计算元素高度时，浮动元素也会被计算在内
6.浮动盒区域不叠加在BFC上