BFC概念及作用

BFC

概念

BFC——block formatting context(块级格式化上下文)

如何触发BFC

1、设置float值不为none（left、right）
2、设置overflow的值不为visibility（hidden、scroll、auto）
3、设置display属性的值为table-cell、table-caption、inline-block、flex之一
4、设置position的值为absolute、fixed

BFC特性

1、浮动的子元素会被父级计算高度（父级触发了BFC）
2、非浮动元素和浮动元素不会互相重叠（非浮动元素触发了BFC）
3、margiin值不会传递给父级（父级触发了BFC）
4、margin值不会发生重叠（给其中一个元素嵌套一个父级并触发了BFC）

BFC的作用

1、解决margin的叠加问题
2、用于清除浮动，解决高度塌陷问题
3、用于布局：与浮动元素相邻的已生成BFC元素不能与浮动元素互相覆盖。利用该特性可以作为多列布局的一种实现方式