前言
上一篇文章我们聊了浮动和如何清除浮动的四种方法，今天，我们就接着来聊聊清除浮动的第五种方法------BFC容器，同时这也是清除浮动使用最多的方法。感兴趣的小伙伴可以先看一看我们上篇写的文章，这样配合起来食用效果更佳哦~
上篇文章 ：浮动及清除浮动
我们先来回顾一下昨天的内容：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;padding: 0;
}
ul li{
list-style: none;
width: 200px;
height: 100px;
float: left;
}
li:nth-child(1) {
background: #da8383;
}
li:nth-child(2) {
background: #e1e941;
}
li:nth-child(3) {
background: #6ceb50;
}
.text{
width: 100px;
height: 150px;
background: #2d3bda;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="text">Hello World</div>
</div>
</body>
</html>页面的效果如下 
我们发现了这样一个问题，由于ul li元素浮动，脱离了文档流，导致text容器的一部分被li覆盖，当我们计算父容器高度时可能会出现错误，影响了页面的布局，这是元素浮动带来的负面影响。
昨天我们讲了可以用以下内容来清除浮动带来的负面影响：
- 给父容器设置高度
- 在最后一个浮动元素之后添加新的元素，在新元素上做 清除浮动
- 在父容器伪元素after上做 清除浮动
- 在下方被浮动影响的容器上做 清除浮动
今天，我们来讲讲清除浮动的第五种方法，BFC容器
BFC容器
- 概念
"BFC容器 "通常是指"块级格式化上下文容器 "（Block Formatting Context Container）。块级格式化上下文（BFC）是在CSS中用来管理和控制元素在页面上布局和排列的一种机制。BFC容器是一种具有特定规则的HTML元素或CSS属性，它们会创建一个独立的上下文，影响其内部元素的布局和排列方式 。BFC容器是CSS布局中的一个重要概念 ，可以帮助开发人员更精确地控制元素的布局和排列
- 作用
- 清除浮动：BFC容器可以用来清除浮动元素的影响，确保父元素包含浮动子元素的高度，从而避免出现高度塌陷问题。这是BFC最常见的应用之一，特别是在创建多列布局或类似网格的布局时非常有用。
- 防止外边距重叠：在同一个BFC容器内的相邻块级元素的外边距不会发生重叠，这有助于更精确地控制元素之间的间距。这对于垂直外边距塌陷问题的解决非常有帮助。
哪些属性可以创建BFC容器
- float: left || right
- position: absolute || fixed
- display: inline-block;
- display: table-cell ....
- overflow: hidden || auto || overly || scroll
- 弹性盒子 (display: flex || inline-flex)
接下来我们就来选择几个属性来解决问题
- 清除浮动
1.在ul中加入 overflow: hidden 或 overflow: auto
上述例子，我们想要清除浮动带来的负面影响，可以在ul中加入 overflow: hidden,将它变成BFC属容器，清除浮动元素的影响
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;padding: 0;
}
ul li{
list-style: none;
width: 200px;
height: 100px;
float: left;
}
li:nth-child(1) {
background: #da8383;
}
li:nth-child(2) {
background: #e1e941;
}
li:nth-child(3) {
background: #6ceb50;
}
.text{
width: 100px;
height: 150px;
background: #2d3bda;
}
ul{
overflow: hidden; // 或者overflow: auto
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="text">Hello World</div>
</div>
</body>
</html>如图，恢复正常啦
2. 在ul中加入 display: flex,使变为弹性盒子
html
ul{
display: flex
}3.在ul中加入 display: inline-block ，将ul变成行内块级元素
html
ul{
display: inline-block
}以上三个属性都清除浮动成功了，我们可以看到BFC容器计算高度时，会将浮动元素的高度也计算在内
- 防止外边距重叠
接下来我们来聊聊BFC容器的另外一个特性，防止外边距重叠
我们想要实现这样一个效果
红色距离顶部100px,蓝色距离红色50px
那么我们在wrap中加入margin-top: 100px; , 在box中加入margin-top: 50px;
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
width: 100%;
height: 400px;
background: red; //红色
margin-top: 100px;
}
.box{
width: 100%;
height: 300px;
background: #62d3e0; //蓝色
margin-top: 50px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
</html>实现效果
但是我们发现，margin重叠了，box蓝色容器并没有距离wrap红色容器50px
我们在父容器.wrap里面加入overflow: auto或者overflow:hidden,将其变成BFC容器，效果就实现啦
总结
我们学前端的可以不知道KFC，但一定要知道BFC，它也是在面试中经常被问到的一个问题，这是BFC常见的两个用途
-
清除浮动：BFC容器可以用来清除浮动元素的影响，确保父元素包含浮动子元素的高度，从而避免出现高度塌陷问题。这是BFC最常见的应用之一，特别是在创建多列布局或类似网格的布局时非常有用。
-
防止外边距重叠：在同一个BFC容器内的相邻块级元素的外边距不会发生重叠，这有助于更精确地控制元素之间的间距。这对于垂直外边距塌陷问题的解决非常有帮助。
今天的内容就到这啦，如果你觉得小编写的还不错的话，或者对你有所启发，请给小编一个辛苦的赞吧