理解CSS中的BFC

1. 概念

块级格式化上下文全称Block Formatting Context，简称BFC。

它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局。

2. 规则

常规流块盒在水平方向上，必须撑满包含块
常规流块盒在包含块的垂直方向上依次摆放
常规流块盒若外边距无缝相邻，则进行外边距合并
常规流块盒的自动高度和摆放位置，无视浮动元素、定位元素

3. 触发BFC

这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：

根元素意味着，元素创建的BFC区域，覆盖了网页中所有的元素
浮动和绝对定位元素
overflow不等于visible的块盒
display为inline-block、table-cells、flex的元素

如图所示：

创建的BFC就是一块独立的渲染区域：

不同的BFC区域，它们进行渲染时互不干扰
创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部

4. BFC具体规则

4.1 创建BFC的元素，它的自动高度需要计算浮动元素

案例：高度坍塌情况

html 复制代码

<style>
    .container {
            background-color: pink;
    }

    .item {
            float: left;
            width: 200px;
            height: 200px;
            margin: 20px;
            background-color: red;
    }
</style>

<body>

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

</body>

结果父元素背景没有显示，因为父元素高度为0，而container时正常块，高度是不会计算浮动元素的高度。

解决方式：

以前使用clearfix,通过自元素进行撑开

css 复制代码

	.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

container设置为BFC元素

css 复制代码

.container {
	background-color: pink;
	/* position: absolute; */
	/* float: left; */
	/* 副作用最小 */
	overflow: hidden;
}

4.2 创建BFC的元素，它的边框盒不会与浮动元素重叠

案例：兄弟元素，一个设置浮动，一个未设置

html 复制代码

<style>
	.float {
		width: 200px;
		height: 200px;
		margin: 20px;
		background-color: red;
		float: left;
	}

	.container {
		height: 500px;
		background-color: lightblue;
	}
</style>

<body>
	<div class="float"></div>
	<div class="container"></div>
</body>

结果如下图：

出现这种情况，是因为container元素会避开浮动元素。那么如果设置container元素为BFC区域，那么边框不会和浮动元素重叠。

css 复制代码

.container {
        height: 500px;
        background-color: lightblue;
        /* bfc */
        overflow: hidden;
}

此时的container是独立的区域会避开浮动元素，实际上是相当于给container元素设置了一个margin-left，相对于页面的左边距，此时设置container元素的margin-left不生效。

只能设置float元素的margin-right，因为它也是浮动元素的一部分。

4.3 创建BFC的元素，不会和它的子元素进行外边距合并

简单来说，处在不同的BFC中的元素，他们的外边距不可能合并，只有相同的BFC外边距才能合并。

案例：

html 复制代码

<style>
	.container {
		height: 500px;
		margin: 50px;
		background-color: lightblue;
	}

	.child {
		height: 100px;
		margin: 50px;
		background-color: red;
	}
</style>

<body>

	<div class="container">
		<div class="child"></div>
	</div>
</body>

结果：上外边距塌陷

解决方式：container添加bfc，因为child是在container的bfc下，container是在根元素的bfc下，他们是互补干扰。

总结

主要介绍了块级格式化上下文（BFC）的概念、规则及触发条件，以及BFC的具体规则和一些案例说明。如有错误，请指正！O^O