BFC块级格式化上下文

最新推荐文章于 2025-12-18 17:13:23 发布

原创最新推荐文章于 2025-12-18 17:13:23 发布 · 253 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

CSS 专栏收录该内容

4 篇文章

订阅专栏

博客详细探讨了BFC（块格式化上下文）的概念及其作用，包括如何触发BFC，如元素浮动导致的父元素高度塌陷问题，两栏自适应布局的实现，以及垂直方向margin重叠的解决方案。通过设置特定样式属性，如overflow、display或position，可以创建BFC以避免布局影响。文章提供了实例代码展示BFC在实际布局问题中的应用。

BFC

BFC的目的

形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局

触发BFC的方式

float 除了none以外的值
overflow 除了visible 以外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block, flex, inline-flex)
position值为（absolute，fixed）
fieldset元素-表单周围的边框说明

BFC到底能干啥

子元素浮动，父元素高度塌陷

			.father,
			.monther {
				width: 600px;
				background-color: #005AA0;
			}
			.son {
				width: 100px;
				height: 100px;
				background-color: #008000;
				float: left;
			}
			.monther {
				height: 200px;
			}

		<div class="father">
			<div class="son"></div>
			<div class="son"></div>
			<div class="son"></div>
			<div class="son"></div>
		</div>
		<div class="monther"></div>

会导致父亲高度为0

解决办法：触发BFC

父亲添加高度-只适用于父亲高度确定时

.father {
	height:200px
}

让父亲也浮动-依然会影响到后边的布局

.father {
	float:left
}

绝对定位/固定定位【脱离标准流】-依然会影响到后边的布局

.father {
	position: absolute;
}

table-cell/inline-block等

.father {
	display: table-cell/inline-block等;
}

两栏自适应布局-一栏固定，一栏自适应[触发BFC]

解决办法：

自适应的一侧触发BFC即可

垂直方向margin重合

			.friend{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			.friend:first-child{
				margin-bottom: 20px;
			}
			.friend:last-child{
				margin-top: 20px;
			}

<div class="friend"></div>
<div class="friend"></div>

在这里插入图片描述
解决办法：

给第二个div包裹一个父亲，父亲触发BFC即可