BFC

最新推荐文章于 2025-08-05 23:41:58 发布

Jessie-moving

最新推荐文章于 2025-08-05 23:41:58 发布

阅读量105

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css BFC

本文链接：https://blog.csdn.net/weixin_43955911/article/details/88663370

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了块级格式化上下文（BFC），它是按块级盒子布局的。阐述了其布局规则，如内部盒子垂直放置、子元素不影响外部等。还说明了触发或创建BFC的方式，如float不为none等。最后列举了BFC的使用场景，包括自适应两栏布局、清除浮动等。

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

BFC相关知识

- BFC

BFC

块级格式化上下文 (Block Fromatting Context), 按照块级盒子布局的

布局规则：

1.内部的盒子会在垂直方向，一个个地放置；
2.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此；
2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；
3.每一个元素的左边，与包括的盒子的左边相接触，即使存在浮动也是如此；
4.BFC的区域不会与float重叠；
5.计算BFC的高度时，浮动元素也參与计算。

触发或创建BFC：

1.根元素。
2.float的属性不为none；
3.position为absolute或fixed；
4.display为inline-block、table-cell，table-caption、flex；
5.overflow不为visible

使用场景：

1、自适应两栏布局（左边固定宽度左浮动，右边overflow：hidden）(BFC的区域不会与float box重叠)
2、清除浮动 给父盒子添加overflow：hidden，让父盒子高度能被浮动元素撑起(计算BFC的高度时，浮动元素也参与计算)
3、防止垂直margin合并 (属于同一个BFC的两个相邻Box的margin会发生重叠）

<style type="text/css">
		.box {
			width: 100px;
			height: 100px;
			background: orange;
			margin: 20px 0;
		}
		.container {
			overflow: hidden;
		}
	</style>
	
	<div class="box"></div>
	<div class="container">
		<div class="box"></div>
	</div>