BFC是什么?
简单说BFC(Block Formatting Context)是块级元素的机制,需要在特定情况下才会激活。
激活的BFC
当一个块级盒子触发BFC之后,其内部形成独立环境,在里面做任何事都不会对盒子外部有影响。而且浮动的元素不会覆盖触发了BFC的盒子。
如何触发BFC
- 浮动元素(元素的
float
不是none
)- 绝对定位元素(元素的
position
为absolute
或fixed
)- 行内块元素(元素的
display
为inline-block
)overflow
值不为visible
的块元素(常用overflow: hidden;
)- 等等。。。。。。
应用场景
解决外边距塌陷问题

解决浮动盒子撑不开父级元素的问题

制作自适应两栏效果

网友评论