logo头像

arthas.com.cn

BFC布局介绍

该文章被围观

本文于471天之前发表,文中内容可能已经过时。

BFC全称block formatting context,中文为“块级格式化上下文”。如果一个元素具有BFC,则内部元素不会影响到外部元素。所以BFC元素是不可能发生margin重叠的,因为margin重叠会影响到外部的元素;BFC元素也可用用来清除浮动的影响,因为如果不清除,子元素浮动则父元素高度塌陷。必然会影响元素的布局和定位。

以下条件会触发BFC:

  • <html>根元素
  • float的值不为none时
  • overflow的值为auto、scroll和hidden
  • display的值为table-cell、table-caption、inline-block中的任何一个
  • position的值不为relative和static

换言之,只要元素符合上面任一条件,就无需使用clear:both的属性去清除浮动的影响了。

以下是一个图片浮动的例子:

可以看到文字和图片出现了环绕效果。如果我们想让文字和图片隔开该如何实现?只需要设置文字部分为BFC元素:

1
2
3
.animal {
overflow: hidden;
}

用BFC实现一个两列布局会简单很多:

1
2
3
4
<div class="bfc">
<div class="left side">左侧</div>
<div class="bfc">主体内容</div>
</div>
1
2
3
4
5
6
7
8
9
.bfc {
overflow: hidden;
}
.left {
float: left;
}
.side {
width: 200px;
}

摘自张鑫旭《CSS世界》一书

上一篇