CSS中的BFC详细讲解（易懂）

💂 个人网站: 【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴，请点击【前端学习交流群】
带你用最简单的方式理解最全面的BFC~~~

1.先了解最常见定位方案

普通流

元素按照其在 HTML 中的先后位置至上而下布局

行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行

所有元素默认都是普通流定位

浮动

元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移

绝对定位

元素会整体脱离普通流，因此绝对定位不会对其兄弟元素造成影响

2.BFC讲解

BFC是属于普通流的，我们可以把BFC看成页面的一块渲染区，他有自己的渲染规则，简单来说就是BFC可以看做元素的属性，当元素有了BFC这个属性，这个元素可以看做隔离了的容器，容器里面的元素不会在布局上影响到外面的元素。

1.BFC特性

每一个BFC区域只包含其子元素，不包含其子元素的子元素

每一个BFC区域相互独立，互不影响

2.如何触发BFC

也就是说怎么给这个元素添加BFC属性，它需满足下列任一条件。

 1. 根元素(<html>)
 
2. 设置float浮动，不包含none
 
3. 绝对定位元素 (元素的 position 为 absolute 或 fixed)
 
4. display 为 inline-block、table-cell、table-caption、table、table-row、table-row-groutable-header-group、table-footer-group、inline-table、flow-root、flex 或 inline-flex、grid 或 inline-grid
 
5. 设置overflow，不为visible
 
6. contain 值为 layout、content 或 paint 的元素
 
7. 多列容器（column-count 或 column-width (en-US) 值不为 auto，包括column-count 为 1）复制

更多查阅文档MDN

3.BFC的作用

1.第一个作用：避免外边距重叠

看个案例（面试也会出现）

 .box{
    width: 200px;
    height: 200px;
    background: #5aa878;
    margin: 100px;
   }
 
 
<body>
    <div class="box"></div>
    <div class="box"></div>
</body>复制

大家认为上下盒子间距是200px吧（狗头）

结果是上间距100px的，这不是bug,这是一种规范。块的上外边距margin-top和下外边距margin-bottom会合并为单个边距，如果两个边距相等取其中一个，若大小边距不一样区最大边距，。

如何解决呢？

只需要将这两个div放置不同的BFC中，那么两个BFC的内容互不干扰。把代码修改如下：

 .box{
      width: 200px;
      height: 200px;
      background: #5aa878;
      margin: 100px;
     }
.container{
       overflow: hidden;
     }
 
 
<div class='container'>
    <div class="box"></div>
</div>
<div class="container">
    <div class="box"></div>
</div>复制

给这两个box给各自一个div包裹，然后给这个div添加 overflow: hidden;属性触发container的BFC，最后就可以看到理想的结果200px

2.第二个作用：清除浮动

啥也不说上代码，看看是不是你想的那样

 .container{
    border: 2px solid yellowgreen;
}
.content{
    width: 100px;
    height: 100px;
    background: #47cabf;
    margin: 100px;
    float: left;
}
 
<div class="container">
    <div class="content"></div>
</div>复制

你们想的应该是一个边框包裹着一个100px的方块，可结果不尽人意····

我们给子元素添加了浮动导致子元素脱离了文档流，所以只剩下2px的边框了。

如何解决？

同样我们给父容器添加BFC属性，添加overflow: hidden;属性触发BFC。这样就起到清除浮动的效果。

 .container{
    border: 2px solid yellowgreen;
    overflow: hidden;
}
.content{
    width: 100px;
    height: 100px;
    background: #47cabf;
    margin: 100px;
    float: left;
}
 
<div class="container">
    <div class="content"></div>
</div>复制

这样就可以了。

3.防止元素被浮动元素覆盖

先上才艺，给两个盒子设置宽高颜色，其中一个设置浮动。

 .box1{
    width: 100px;
    height: 100px;
    background: blue;
    float: left;
}
.box2{
    width: 200px;
    height: 200px;
    background: red;
}
 
<div class="box1"></div>
<div class="box2"></div>复制

你们想的结果可能是两个盒子独占一行，可是结果~~~

这里可以看到浮动元素覆盖了没有添加浮动的元素，如果想不被覆盖，可以触发正常的元素的BFC即可。所有在第二个元素添加overflow: hidden;属性，这样这两个属性就互不干扰。

 .box1{
    width: 100px;
    height: 100px;
    background: blue;
    float: left;
}
.box2{
    width: 200px;
    height: 200px;
    background: red;
    overflow: hidden;
}
 
<div class="box1"></div>
<div class="box2"></div>复制

这样就正常了。

4.防止父子元素外边距塌陷

上菜~~

 .box1{
    width: 200px;
    height: 200px;
    background: blue;
}
.box2{
    width: 100px;
    height: 100px;
    background: red;
    margin-top: 20px;
}
 
<div class="box1">
   <div class="box2"></div>
</div>复制

大家想的结果是父元素距离子元素20px,然而~~

给子元素添加margin-top:50px后，影响了父元素，给父元素添加BFC属性即可。

 .box1{
    width: 200px;
    height: 200px;
    background: blue;
    overflow: hidden;
}
.box2{
    width: 100px;
    height: 100px;
    background: red;
    margin-top: 20px;
}
 
<div class="box1">
   <div class="box2"></div>
</div>复制

ok~~~

6.总结

一个BFC区域只包含它的子元素，不包含其子元素的子元素。

成为一个BFC区域要满足一定的条件。

不同的BFC区域相互独立，互补影响。

	1. 根元素(<html>)

	2. 设置float浮动，不包含none

	3. 绝对定位元素 (元素的 position 为 absolute 或 fixed)

	4. display 为 inline-block、table-cell、table-caption、table、table-row、table-row-groutable-header-group、table-footer-group、inline-table、flow-root、flex 或 inline-flex、grid 或 inline-grid

	5. 设置overflow，不为visible

	6. contain 值为 layout、content 或 paint 的元素

	7. 多列容器（column-count 或 column-width (en-US) 值不为 auto，包括column-count 为 1）

	.box{
	width: 200px;
	height: 200px;
	background: #5aa878;
	margin: 100px;
	}


	<body>
	<div class="box"></div>
	<div class="box"></div>
	</body>

	.container{
	border: 2px solid yellowgreen;
	}
	.content{
	width: 100px;
	height: 100px;
	background: #47cabf;
	margin: 100px;
	float: left;
	}

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

	.container{
	border: 2px solid yellowgreen;
	overflow: hidden;
	}
	.content{
	width: 100px;
	height: 100px;
	background: #47cabf;
	margin: 100px;
	float: left;
	}

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

	.box1{
	width: 100px;
	height: 100px;
	background: blue;
	float: left;
	}
	.box2{
	width: 200px;
	height: 200px;
	background: red;
	}

	<div class="box1"></div>
	<div class="box2"></div>