关于BFC(块级格式化上下文)的种种

最新推荐文章于 2025-06-06 09:53:30 发布

老班老班

最新推荐文章于 2025-06-06 09:53:30 发布

阅读量285

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： BFC 块级格式化上下文 CSS

本文链接：https://blog.youkuaiyun.com/weixin_42424269/article/details/87368625

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文深入解析BFC（Block Formatting Context）在网页布局中的作用，包括解决浮动元素导致的布局问题，防止垂直margin重叠，以及如何通过设置overflow属性触发BFC。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于定义

BFC的简单定义为一个独立的渲染区域，只有Block-level Box参与,它规定了内部Block-level Box如何布局，并且这个区域与外部毫不相干。

BFC对于浮动和清除浮动来说非常重要
举个例子：

图中如果页面正中的文字是比较少的话看着是比较正常的，但是当我们需要继续添加下一个标题时，我们一般希望标题是左对齐的，但是如果直接添加的话，结果是不如人意的，就像这样：

一般采用clear：both的方法并不适用于所有情况，因为这个方法只适用于同一BFC中没有其他元素的时候

所以我们可以采用让容器元素伸展到能够包含红色正方形，而不是让他们超出块元素的底部。
p { overflow: hidden; height: auto; }

再举一个例子：

	.par {
				border: 5px solid #fcc;
				width: 300px;
				
			}
	.child {
			border: 5px solid #f66;
			width: 100px;
			height: 100px;
			float: left;
		}
		
<div class="par">
			<div class="child"></div>
			<div class="child"></div>
</div>

此时par的宽和高是310和10，两个正方形的宽和高是110*110，效果为：
在这里插入图片描述
我们可以采用BFC解决这个问题，因为在计算BFC的高度时，浮动元素也会参与计算，

	.par {
				border: 5px solid #fcc;
				width: 300px;
				overflow: hidden;
			}
			.child {
				border: 5px solid #f66;
				width: 100px;
				height: 100px;
				float: left;
			}

可以触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算。
效果如下：
在这里插入图片描述

防止垂直margin重叠
因为Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠,就像下面这样：

p{
   			color: red;
   			background:green ;
   			text-align: center;
   			margin: 100px;
   			width: 200px;
   			line-height: 100px;
   		}
   		
<body>
   	<p>haha</p>
   	<p>heihei</p>
</body>

在这里插入图片描述
为了防止margin重叠，我们可以使用BFC。我们在一个元素的外面包裹一层容器，使之形成一个BFC，这样两个P标签就属于不同的BFC了，此时就不会发生重叠，就像这样：

#wrap{
				overflow: hidden;
			}
p{
	color: red;
	background:green ;
	text-align: center;
	margin: 100px;
	width: 200px;
	line-height: 100px;
}

<body>
		<p>haha</p>
		<div id="wrap">
			<p>heihei</p>
		</div>
</body>

在这里插入图片描述