css3---BFC讲解

【前言】今天给大家分享一下 常见格式化上下文

【内容】常见格式化上下文FC --Formatting Context
常见格式化上下文分为一下几类：
①BFC—Block Formatting Context—块级格式化上下文

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与。

会生成BFC的元素
（1）根元素
（2）float属性不为none
（3）position为absolute或fixed
（4）display为inline-block, table-cell, table-caption, flex, inline-flex
（5）overflow不为visible，
BFC应用
①浮动覆盖问题


根据BFC布局规则第四条：
BFC的区域不会与float box重叠。
我们可以通过触发main生成BFC， 来实现自适应两栏布局。当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。效果如下：

②清除内部浮动
元素浮动后造成父级高度塌陷


③防止垂直margin重叠
垂直方向上的兄弟元素会发生边距重叠（听从较大的margin外边距）

方案：可以在任意一个元素外面再包裹一层容器，并触发该容器生成一个BFC。那么两个块便不属于同一个BFC，就不会发生margin重叠了。

②IFC—Inline Formatting Context—行级格式化上下文
③FFC—Flexible Formatting Contex----弹性格式化上下文
④GFC—Grids Formatting Contex—网格格式化上下文