css中的 BFC
特性是在css2.1规范中引入的块渲染规则,利用这些规则可以帮助我们处理页面中的布局等问题。比如:在清除浮动方案中我们可以在父容器中加入 overflow:hidden
,这就是利用了 BFC
特性。同时也是面试中一个常问的知识点,所以深入理解 BFC
很重要。
什么是BFC
BFC是 (Block Formatting context)
的简称,即块格式化上下文。可以理解为它是运用一些渲染规则的块渲染区域,它是css世界中的结界。为何说是结界,因为在触发了 BFC
特性的容器下元素和容器外部元素完全隔离,子元素的布局不会影响外部元素,反之依然。
BFC
元素有如下一些特征:
-
BFC的块不会和浮动块重叠
-
计算BFC元素的高度时,会包括浮动元素
-
在一个BFC下的块
margin
会发生重叠,不在同一个则不会 -
BFC元素是一个独立的容器,使得里面的元素和外部元素隔离开,互补影响
触发BFC
通过以下设置可以触发一个块元素的BFC特性:
-
float
的值不为none
-
overflow
的值为auto
,scroll
和hidden
-
display
的值为table-cell
,table-caption
和inline-block
-
position
设置为absolute
和fixed
除此之外, html
元素本身默认就是一个 BFC
元素
应用场景
清除浮动
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
.box {
background: #eee;
}
.left {
width: 200px;
height: 200px;
float: left;
border: 1px solid pink;
}
.right {
height: 100px;
border: 1px solid greenyellow;
}
效果如下:

可见,浮动元素 .left
脱离了正常流,和元素 .right
发生了重叠。而且父容器的高度不包含浮动元素,发生了坍塌。
利用 BFC
元素的特征2,在包含浮动元素的容器触发 BFC
特性,防止容器的高度发生坍塌。一般是设置 overflow:hidden
来触发,如下:
.box {
background: #eee;
/* 触发bfc */
overflow: hidden;
}
效果如下:

自适应布局
利用特征1,我们可以对 .right
触发 BFC
特性,让他不和左边的浮动元素重叠,确保子元素不受到外部影响。同时因为 .right
是一个块元素,具有流体的特性,会随着视口宽度变化发生自适应,从而实现两栏自适应,甚至多栏也是如此。
.right {
height: 100px;
border: 1px solid greenyellow;
overflow: hidden;
}
效果如下:

但是对于超出 .right
区域需要显示内容的场景,这种方案就不适用了。可以利用 table-cell
和 inline-block
触发 BFC
特性。
.right {
display: table-cell;
width: 9999px;
height: 100px;
border: 1px solid greenyellow;
/* 利用 css hack 兼容IE7 的情况 */
*display: inline-block;
*width: auto;
}
对于单元格的盒子有一个特点,就是设置的宽度超过父容器时,实际宽度也是不会超过父容器的,这就和自适应效果一样。所以我们给宽度设置了一个超大值。但是table-cell
只使用于IE8+的浏览器,对于需要考虑IE7的情况,可以利用设置 inline-block
,它在IE7上表现的和 block
盒一样,也是会自适应的。
其他触发 BFC
特性的条件都有自己的约束,所以常用的就是上面两种方案来触发
防止margin合并
我们知道两个相邻的块盒会发生 margin
合并,以最大的为准。所以利用 BFC
特性3,让其中一个块盒包含在一个新的BFC容器下,让他们相互隔离,不会影响。