我也来说说BFC

“BFC”是什么鬼?一直都不清楚。上次在面试被问到了,完全不晓得是什么东西。提示说是块级格式化上下文,还说肯定用过的,我就纳闷了,这么高级的东西听都没听过更何况是用呢。

面试完后百度了一下,居然搜不到太多的资料,还真怀疑自己听错了。果断选择Google,发现W3C是这样定义BFC(块格式化上下文 block formatting context)的:

Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts.

也就是说创建的BFC元素是一个独立的盒子,它的特征如下:

  • 内部的Box会在垂直方向,从顶部开始一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
  • 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box叠加。
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
  • 计算BFC的高度时,浮动元素也参与计算。

何时产生BFC

W3C给出的定义大致意思是说只要满足下列情况的任意一种,就会产生BFC

  • float的值不为none
  • position的值为absolute或fixed
  • display的值为inline-block、table-cell或table-caption
  • overflow的值不为visible
  • 弹性盒子(flex boxes)

BFC能做什么

说了这么多,我们终究是要用它来解决问题的。BFC到底能解决什么问题的呢?

图文混排-防止文字环绕

通常我们在处理文章是都会使用文字环绕
文字环绕

一般处理方式

1
2
3
4
<div class="container">
<div class="img-area"></div>
<p class="text-area">文字。。。</p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.container{
background-color:red;
width: 400px;
}
.img-area{
width: 50px;
height: 50px;
float: left;
background-color: skyblue;
}
.text-area{
background-color: yellow;
/*overflow: hidden;*/
}

但有时候我们并不想要图文混排的模式,而是像这样
防止文字环绕

该怎么处理呢,我们可以让.text-area变成BFC元素,比如设置.text-area的overflow: hidden。

这就前面BFC规则里面的第四条

BFC的区域不会与float box叠加。

防止垂直方向上的margin重叠

我相信在垂直方向上出现margin重叠的问题大家都有所了解,下面就直接看例子

1
2
3
4
5
6
7
<div class="container">
<p>block-1</p>
<p>block-2</p>
<div class="newBFC">
<p>block-3</p>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
.container{
background-color:gray;
overflow: hidden;
}
\p{
background-color: skyblue;
margin:10px;
}
.newBFC{
overflow: hidden;//创建一个BFC
}

防止margin重叠

从上面例子的运行结果可以看出1、2两个p标签的间隔为10px发生了重叠,而2、3两个p标签的间隔为20px,没有重叠。(为了更好的理解建议在浏览器的开发者工具中查看3个p标签的位置)。

其实,防止margin重叠的关键就是在.newBFC重新创建了一个BFC

  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。

防止高度坍塌

高度坍塌是指容器里面元素都浮动导致父元素没有实际的高度

1
2
3
4
<div class="container">
<div class="floated">floated</div>
<div class="floated">floated</div>
</div>
1
2
3
4
5
6
7
8
9
.container {
background: #ffff00;
/*overflow: hidden;*/
}
.floated {
float: left;
border: 1px solid #2700ff;
}

高度坍塌对比

上面这个例子通过设置父元素的overflow:hidden来生产BFC元素,解决了高度坍塌的问题

计算BFC的高度时,浮动元素也参与计算。

总结

以上是我对BFC的一个理解,如果要想好好了解它,个人觉得只有在实际应用中才会有所体会。

#原文出自:http://tech.vg.no/2013/09/26/css-block-formatting-context/

参考资料:

块格式化上下文: https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
block formatting contexts:http://css-101.org/block-formatting-contexts/index.php