- 创建一个BFC,一个BFC可以被显式的触发。如果想要创建一个新的BFC,只需要给它添加下面提到的任何一个CSS样式就可以了。
- float的值不为none
- position的值不为static或者relative
- display的值为 table-cell, table-caption, inline-block, flex, inline-flex中的其中一个
- overflow的值不为visible
外边距折叠
在常规文档流中,盒子都是从包含块的顶部开始一个接着一个垂直堆放。两个兄弟盒子之间的垂直距离是由他们个体的外边距所决定的,但不是他们的两个外边距之和,取两个外边距较大的那个值作为最终的外边距。
垂直方向的外边距折叠只有这两个元素在同一个BFC中时才会发生,所以为了阻止外边距折叠,我们可以给兄弟元素添加某个属性让其生成一个新的BFC清除浮动
子元素浮动,给父元素添加属性让其生成新的BFC,清除浮动BFC防止文字环绕
- 多列布局中使用BFC
参考:http://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html
CSS BFC(块级格式化上下文)
最新推荐文章于 2023-08-04 16:23:59 发布