什么是BFC，如何清除浮动？

最新推荐文章于 2025-10-10 13:37:01 发布

原创最新推荐文章于 2025-10-10 13:37:01 发布 · 445 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3

HTML、css 专栏收录该内容

7 篇文章

订阅专栏

本文深入解析BFC（Block Formatting Context）的概念，探讨其在自适应布局、清除浮动及解决外边距重叠等问题中的应用。同时，介绍了创建BFC的方法及如何通过BFC优化网页布局。

BFC（Block Formatting Context）块级格式化上下文，是一个独立的布局环境。有自己独立的渲染区域。且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。BFC布局的特点就是将自己与外部隔离开。内部的布局不会受外部影响，外面的也不会影响内部的布局。

BFC的应用场景有哪些？

自适应布局
清除浮动
解决布局时盒子在垂直方向上外边距重叠问题

边距重叠:当两个box都设置了margin，那么这两个box在垂直方向上会发生边距重叠，取绝对值较大的那个为最终值。

嵌套关系（父级关系），如果子元素设置了外边距margin，在没有给父元素设置BFC的情况下，父元素也会有外边距。解决方法就是给父元素添加 overflow：hidden。使父元素变成BFC（但是父元素的高度会发生变化）

.parentbox {
	height:200px;
  	border: 1px solid red;
  	overflow: hidden;
}

.childbox {
  	margin: 20px;
  	background: #0076ff;
  	width: 100px;
  	height: 100px;
}

同级元素的重叠，取绝对值较大者

.sibling1{
  background: #090a;
  width: 300px;
  height: 200px;
  margin-bottom: 30px;
}
.sibling2{
  background: #ea3f11;
  width: 200px;
  height: 200px;
  margin-top: 10px;
}

 <div class="sibling1"></div>
   <div class="sibling2"></div>

如何创建一个BFC？

overflow：hidden（auto）这种方法常用来清除浮动。
position：absolute（fixed）这种方法会使元素脱离标准文档流，不占位置
display:inline-block/table-cell /flex/inline-flex(不常用)
float：left（right）这种方法会使元素脱离文档流，并且父元素也会受影响。

如何清除浮动？：

给父元素添加 overflow：hidden (auto)
在浮动元素的末尾加一个空标签并为其设置样式 clear:both （额外标签法）（这种方法的缺点就是会增加多余的标签）
after伪元素清除浮动（推荐使用）
具体代码：

.mainBox:after{
  	content: "";
  	height:0;
    display: "block";
    clear:both;
    visibility: hidden;
    overflow:hidden;
}