一、什么是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和边距重叠