CSS基础之BFC布局

最新推荐文章于 2025-10-08 20:04:52 发布

原创最新推荐文章于 2025-10-08 20:04:52 发布 · 3.9k 阅读

21 ·

CC 4.0 BY-SA版权

lee前端技术站

文章标签：

#css #css3 #前端 #vue.js #reactjs

CSS 专栏收录该内容

7 篇文章

订阅专栏

本文深入解析CSS中的BFC（Block Formatting Context）概念，探讨其触发条件、特点及应用场景，包括解决margin重叠、高度塌陷等问题，是前端面试必备知识点。

CSS布局中BFC是面试中常被问到的问题，那么我们就来总结一下的相关知识点。

BFC的全名叫block formatting context, 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。没看懂什么意思。应该是这样：

BFC的布局是一个独立的布局，和BFC之外的布局是互不印象的；
BFC布局是可以通过一些条件触发的，从而实现布局上的需求或解决一些问题；
BFC其实就是一个工具，理解功能和特性就OK。

BFC触发的条件？

根元素（<html>）
float值非none
overflow值非visible
display值为inline-block、table-cell、table-caption、flex、inline-flex
position值为absolute、fixed

BFC的特点是什么？

1、属于同一个BFC的两个相邻容器的上下margin会重叠

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style type="text/css">
            .top{
                width: 200px;
                height: 200px;
                background: red;
                margin-bottom: 40px;
            }
            .bottom{
                width: 200px;
                height: 200px;
                background: blue;
                margin-top: 60px;
            }
        </style>
	</head>
	<body>
        <div class="top"></div>
        <div class="bottom"></div>
	</body>
</html>

功能：可解释为何相邻两容器上下外边距会发生重叠

上面色块给下外边距40px

当给红色块下外边距margin-bottom，给蓝色块上外边距margin-top时，上下外边距会发生重叠，两个色块的间距解析为两者中的较大值（60px）。

原因：
此时红色块和蓝色块属于同一个BFC，即根元素（<html>）。BFC的特性1规定 “属于同一个BFC的两个相邻容器的上下margin会重叠”，故两者上下边距发生重叠。

解决方法：给蓝色块添加父元素.box并添加声明overflow: hidden;可以解决红色块和蓝色块的上下margin重叠问题。在这里插入图片描述

原因：
通过给蓝色块添加父元素.box并添加声明overflow: hidden;，使得父元素.box触发了BFC（见BFC触发条件3），此时红色块和蓝色块属于不同的BFC，红色块的BFC仍然是根元素（<html>），蓝色块的BFC是父元素.box。即不满足BFC特性1中的规定“属于同一个BFC······”，从而解决了两者的上下margin重叠问题。

注：overflow: hidden;只是触发BFC众多条件中的一个，使用其他条件也能解决此问题，注意触发条件可能造成的其他影响即可，如浮动会造成的脱离文档流等。

2、计算BFC高度时浮动元素也参于计算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style type="text/css">
            .outside{
                border: 10px solid blue;
            }
            .inside{
                width: 200px;
                height: 200px;
                background: yellowgreen;
                float: left;
            }
        </style>
	</head>
	<body>
        <div class="outside">
            <div class="inside"></div>
        </div>
	</body>
</html>

功能：可解释为何overflow: hidden;能解决父元素高度塌陷在这里插入图片描述

当父元素.outside没有设置高度且子元素.inside都浮动时，父元素.outside会出现高度塌陷。

原因：
子元素.inside设置浮动后脱离文档流，而父元素.outside又没有设置高度，故父元素.outside会出现高度塌陷。

解决方法：给父元素.outside添加声明overflow: hidden;，父元素高度塌陷消失。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style type="text/css">
            .outside{
                border: 10px solid blue;
                overflow: hidden;
            }
            .inside{
                width: 200px;
                height: 200px;
                background: yellowgreen;
                float: left;
            }
        </style>
	</head>
	<body>
        <div class="outside">
            <div class="inside"></div>
        </div>
	</body>
</html>

在这里插入图片描述

原因：
给父元素.outside添加声明overflow: hidden;，使得父元素.outside触发了BFC（见BFC触发条件3），而BFC特性规定“计算BFC高度时浮动元素也参于计算”，此时子元素.inside虽然设置了浮动，但其高度仍计算至父元素内，从而解决了高度塌陷问题。

3、BFC的区域不会与浮动容器发生重叠

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style type="text/css">
            .left{
                width: 100px;
                height: 200px;
                background: yellowgreen;
                float: left;
            }
            .right{
                height: 300px;
                background: blue;
            }
        </style>
	</head>
	<body>
        <div class="left"></div>
        <div class="right"></div>
        
	</body>
</html>

功能：在布局上实现自适应两栏（三栏）

在这里插入图片描述

正常情况下，左侧元素.left浮动时，会与右侧元素.right发生重叠，不能实现自适应两栏效果。

原因：
左侧元素浮动，脱离文档流。

解决方法：给右侧元素.right添加声明overflow: hidden;，左右侧元素重叠消失，实现自适应两栏效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style type="text/css">
            .left{
                width: 100px;
                height: 200px;
                background: yellowgreen;
                float: left;
            }
            .right{
                height: 300px;
                background: blue;
                overflow: hidden;
            }
        </style>
	</head>
	<body>
        <div class="left"></div>
        <div class="right"></div>
        
	</body>
</html>

在这里插入图片描述