前言
上一篇文章我们聊了浮动和如何清除浮动的四种方法，今天，我们就接着来聊聊清除浮动的第五种方法——BFC容器，同时这也是清除浮动使用最多的方法。感兴趣的小伙伴可以先看一看我们上篇写的文章，这样配合起来食用效果更佳哦~
上篇文章：浮动及清除浮动
我们先来回顾一下昨天的内容：
<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 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,使变为弹性盒子
ul{ display: flex }
3.在ul中加入 display: inline-block ，将ul变成行内块级元素
ul{ display: inline-block }
以上三个属性都清除浮动成功了，我们可以看到BFC容器计算高度时，会将浮动元素的高度也计算在内
- 防止外边距重叠
接下来我们来聊聊BFC容器的另外一个特性，防止外边距重叠
我们想要实现这样一个效果
红色距离顶部100px,蓝色距离红色50px
那么我们在wrap中加入margin-top: 100px; , 在box中加入margin-top: 50px
<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容器内的相邻块级元素的外边距不会发生重叠，这有助于更精确地控制元素之间的间距。这对于垂直外边距塌陷问题的解决非常有帮助。
今天的内容就到这啦，如果你觉得小编写的还不错的话，或者对你有所启发，请给小编一个辛苦的赞吧
