《七》BFC

原创已于 2025-01-24 14:56:35 修改 · 182 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

于 2022-07-20 08:43:31 首次发布

CSS 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了BFC（Block Formatting Context）的概念，它是页面布局中的一个重要概念，用于处理元素的垂直排列。当一个盒子内部的子元素全部浮动后，若未设置高度，该盒子将无法撑起自身高度，引发高度塌陷问题。通过创建BFC，如设置浮动、定位、display属性或overflow属性，可以解决这一问题。BFC不仅能够防止元素被浮动元素覆盖，还能消除margin塌陷。文章还提及了IE6、7浏览器的haslayout机制与BFC的差异，并提示可通过设置`zoom:1`来触发布局。

一个盒子不设置 height，当子元素都设置浮动后，无法撑起自身的高度。原因就是这个盒子没有形成 BFC。

.box {
	width: 400px; 
	border: 10px solid #000;
}
.box div {
	width: 200px;
	height: 200px;
	float: left;
}
.c1 {
	background-color: orange;
}
.c2 {
	background-color: blue;
}

<div class="box">
	<div class="c1"></div>
	<div class="c2"></div>
</div>

请添加图片描述

BFC：Block Formatting Context，块级格式化上下文。是页面上的一个隔离的独立容器，容器里面的元素不会在布局上影响到外面的元素。可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

触发 BFC 的方法：

html 根元素本身就是一个 BFC 元素。
设置浮动，且 float 的值不为 none。
设置定位，且 position 的值为 absolute 或 fixed。
设置 display 的值为 inline-block、flex 或者 inline-flex。
设置 overflow 的值不为 visible。

BFC 的作用：

BFC 可以阻止父元素高度塌陷：父元素高度自适应，当子元素设置浮动后，父元素会失去高度，此时需要给父元素触发 BFC，实现父元素对子元素的包裹。
BFC 可以防止 margin 合并：一般有两种情况会出现 margin 合并。
- 父子元素：子元素设置 margin 后，会穿透父级，作用于父元素的外边距。若父子元素都设置margin，取最大。
- 相邻元素：竖直方向上的 margin 会合并，并以 margin 最大值显示。
BFC 可以阻止元素被浮动元素覆盖：就可以利用 BFC + 浮动元素实现多栏布局。

浏览器差异：

IE6、7 浏览器使用 haslayout 机制，和 BFC 规范略有差异。 IE 浏览器可以使用 zoom: 1 属性让盒子拥有布局 layout。

zoom:1 最常见的用途就是在 IE6 中专门用来触发 haslayout 属性。hasLayout 是 IE 特有的一个属性，很多 IE 的 css bug 都与其息息相关。在 IE 中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的 hasLayout 属性值为 true 时，它负责对自己和可能的子孙元素进行尺寸计算和定位。