BFC是什么？

最新推荐文章于 2024-04-20 21:55:23 发布

原创最新推荐文章于 2024-04-20 21:55:23 发布 · 446 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #web #BFC #全栈

日志杂谈专栏收录该内容

8 篇文章

订阅专栏

一、什么是BFC?
1.BFC的概念
BFC全称Block Formatting Context ，直译“块级格式化上下文”，也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个div内部，我们用float和margin布局元素。

个人理解：BFC相当于构建了一个密闭的盒子模型，在BFC中的元素不受外部元素的影响BFC就是把盒子中子元素的属性锁在父元素中，使其不影响盒子外的元素

二、BFC是如何产生的

根元素(html)
float的值不为none
position的值为absolute和fixed
display的值为table-cell、table-caption、flex、inline-flex
overflow的值部位visible
只要满足以上条件之一就能触发BFC

三、BFC在布局中的应用
防止margin重叠：

同一个BFC中的两个相邻Box才会发生重叠与方向无关，不过由于上文提到的第一条限制，我们甚少看到水平方向的margin重叠。这在IE中是个例外，IE可以设置write-mode。下面这个demo来自寒冬大神的博客。

<!doctype HTML>
<html>
<head>
<style type="text/css">
    #green {
        margin:10px 10px 10px 10px
    }
    #blue {
        margin:10px 10px 10px 10px
    }
    #red {
        margin:10px 10px 10px 10px
    }
    body {
        writing-mode:tb-rl;
    }
</style>
</head>
<body>
<div id="green" style="background:lightgreen;height:100px;width:100px;"></div>
<div id="blue" style="background:lightblue;height:100px;width:100px;"></div>
<div id="red" style="background:pink;height:100px;width:100px;"></div>
</body>
</html>

可以看到水平方向的margin发生了重叠。
在这里插入图片描述
要阻止margin重叠，只要将两个元素别放在一个BFC中即可（可以用上文提到的方式让相邻元素其中一个生成BFC）。阻止两个相邻元素的margin重叠看起来没有什么意义，主要用于嵌套元素。

总结
BFC的结构是什么样的，像DOM一样的树状结构，还是一个BFC集合。其实我们不需要关心BFC的具体结构，这要看浏览器的具体实现采用什么样的数据结构。对于BFC我们只需要知道使用一定的CSS声明可以生成BFC，浏览器对生成的BFC有一系列的渲染规则，利用这些渲染规则可以达到一定的布局效果，为了达到特定的布局效果我们让元素生成BFC。
参考文章
BFC的概念和解决外边距合并
 深入理解BFC和外边距合并
 CSS理解：BFC和边距重叠