转载地址:深入理解BFC与边距折叠
转载地址:理解CSS中的BFC
是什么
BFC(Block Formatting Context)是web页面中盒模型布局的CSS渲染模式。
属于常规文档流。
通俗理解:
是一个独立的布局环境,可以理解为一个箱子,里面物品的摆放不受外界的影响。
一个BFC中,块盒子与行盒子都垂直的沿着父元素的边框排列。
BFC中,行盒子与块盒子的左外边缘margin-left会碰到容器的左边缘border-left(从左到右时)。
创建:
当一个元素的CSS样式为:
1.浮动
2.绝对定位元素
3.display:inline-block/table-cells,table-captions
4.overflow!=visible
中的任意一个时,一个BFC被创建。
常见应用场景:
1.取消文字环绕图片
2.合并外边距:折叠条件:margin相邻接。
相邻接是指:处于常规文档流中(非float与absolute)的块级盒子,并处于同一个BFC中。