前端技巧CSS块级格式化上下文BFC的概念及其运用

CSS块级格式化上下文BFC的概念及其运用

BFC这个词是在一篇博客里看到的,它全称是Block Formatting Context,中文翻译为“块级格式化上下文”。我们都知道,一个网页是由多个不同的Box组成的,元素的类型和display属性,决定了这个Box的类型,我们所了解的Box类型有块级(block)和行内级(inline)等……

BFC是一个独立的渲染区域,它有一套自己的布局规则:

1. 内部的Box会在垂直方向,一个接一个地放置;

2. Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠;

3. 每个元素margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反),即使设置了浮动也是如此;

4. BFC的区域不会与float box重叠;

5. BFC是页面上一个隔离出来的独立容器,容器里面的子元素不会影响到外面的元素,反之也如此;

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

一般的,下面这些元素会生成BFC:

1. body根元素

2. float属性不为none时(向左浮动或向右浮动)

3. position为absolute或fixed时

4. display为inline-block, table-cell, table-caption, flex, inline-flex这些值的时候

5. overflow不为visible时(hidden, auto, scroll)

下面来说说网页设计中与BFC有关的几个现象:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试页面</title>
<style type="text/css">
.a1 {margin:20px 0;background:#ad0;width:200px;height:50px;}
.a2 {margin:20px 0;background:#3dc;width:200px;height:50px;}
</style>
</head>
<body>
 <div class="a1">
 </div> 
 <div class="a2">
 </div>
</body>
</html>

这里a1和a2两个div在垂直方向上的外边据产生了重叠:

bfc1.png

假如将a1外层加上一个容器,例如:

<div class="wrap">
 <div class="a1">
 </div>
</div>
 <div class="a2">
 </div>

将容器生成一个BFC,例如:

.wrap {overflow:hidden;}

这样的话,a1和a2便不属于同一个BFC,也就不会发生垂直方向的外边据重叠了。

bfc2.png

制作左右两列网页布局,也可以通过BFC来实现,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试页面</title>
<style type="text/css">
.wrap {overflow:hidden;}
.a1 {margin:0;background:#ad0;width:300px;height:500px;float:left}
.a2 {margin:0;background:#3dc;height:500px;overflow:hidden;}
</style>
</head>
<body>
 <div class="a1">
 </div>
 <div class="a2">
 </div>
</body>
</html>

例如这里给a1设置了向左浮动,a2触发了BFC,因为BFC的区域不会与float box重叠,所以便产生了这样左列固定宽度,右列自适应的布局。

bfc3.png

通过BFC还可以实现清除浮动的效果,网页设计中,经常遇到对子元素设置浮动后,父元素会发生高度塌陷,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试页面</title>
<style type="text/css">
.wrap {width:400px;background:#36a;border:5px solid #555;}
.x1 {width:200px;height:150px;background:#7ac;float:left;}
</style>
</head>
<body>
<div class="wrap">
 <div class="x1">
 </div>
 <div class="x1">
 </div>
</div>
</body>
</html>

这种情况很常见,当子元素快设置了浮动,父容器高度产生塌陷:

BFC清除浮动.png

一般的遇到这个问题,我们在子元素块后面加一个空的div设置清除浮动即可,但根据BFC规则,计算BFC的高度时,浮动元素也会参与计算,所以如果把父容器变成一个BFC,则也能实现清除浮动的效果,例如:

.wrap {overflow:hidden;}

很多人使用overflow:hidden来触发BFC,但根据上文所述,这不是唯一的方法,还有的朋友喜欢给父容器也设置浮动,也能解决父容器高度塌陷的问题,本例“正常”的效果应该是这样的:

BFC清除浮动2.png

所以经常看到一些网页通过给父元素设置overflow:hidden来实现清除浮动。也有很多朋友知道设置overflow:hidden可以清除浮动,但可能并不明白其中的缘由,了解了BFC的知识后应该会更容易理解。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/skill/94.html