BFC是什么?
简单说BFC(Block Formatting Context)是块级元素的机制,需要在特定情况下才会激活。
激活的BFC
当一个块级盒子触发BFC之后,其内部形成独立环境,在里面做任何事都不会对盒子外部有影响。而且浮动的元素不会覆盖触发了BFC的盒子。
如何触发BFC
- 浮动元素(元素的
float
不是none
)- 绝对定位元素(元素的
position
为absolute
或fixed
)- 行内块元素(元素的
display
为inline-block
)overflow
值不为visible
的块元素(常用overflow: hidden;
)- 等等。。。。。。
应用场景
解决外边距塌陷问题
![](https://img.haomeiwen.com/i14959532/2105093810433230.gif)
解决浮动盒子撑不开父级元素的问题
![](https://img.haomeiwen.com/i14959532/880e21bb582993b3.gif)
制作自适应两栏效果
![](https://img.haomeiwen.com/i14959532/d3f521a97e4a394c.gif)
网友评论