BFC就是,块级格式化上下,就是一个独立不受外界干扰也不干扰外界的盒子.
如何生成BFC
根元素;html标签就是一个BFC。
- float不为none
- position为absolute或fixed
- display为inline-block,table-cell,table-caption,flex,inline-flex
- overflow不为visible
应用场景
1,防止margin发生重叠
2, 避免某元素被浮动元素覆盖,有时一个盒子浮动可能会覆盖掉另一个盒子,让被覆盖的盒子也生成bfc即可
3,清除浮动,当我们不给父盒子设置高度,子盒子设置浮动的时候,会发生高度塌陷,这个时候我们就要清楚浮动