前言
在上一篇章的学习中我们学习了浮动布局和如何解决高度塌陷问题，我们来回顾一下，清除浮动的方法有哪几种？四种，1.直接设置，2.使用clear:both，3.设置伪元素，4.触发BFC容器。今天我们将展开来学习BFC容器，什么是BFC容器，怎么触发BFC容器？
BFC容器
BFC容器，即块级格式化上下文（Block Formatting Context）容器
BFC容器通过创建一个独立的布局环境，解决了父元素高度塌陷、边距合并、清除浮动带来的布局问题以及图文环绕等问题，是CSS布局中一个非常有用的概念。在实际开发中，合理利用BFC可以大大提高布局的效率和可控性。
BFC解决了哪些问题
解决Margin重叠问题
当元素上下排列时时常会遇到Margin重叠的问题，就像下面这个例子
我设置了两个容器垂直排列，为他们设置了margin为50px，但是在垂直方向上他们发生了margin的问题。我原本想让他们分割开100px的距离。现在只有50px,我该怎么解决呢？
我们只需要给其中一个元素的父容器（或任何一个包裹它们的容器）创建BFC，我们可以简单地给其中一个容器的父容器设置overflow: hidden或其他能触发BFC的属性
下面以两个div举例，我会将其中一个div设置为BFC容器来避免margin重叠问题
css
.bfc-wrapper {
overflow: hidden;
/* 触发BFC */
}
.div1,
.div2 {
margin: 50px;
background-color: lightblue;
padding: 10px;
}
html
<div class="bfc-wrapper">
<div class="div1">Div 1</div>
</div>
<div class="div2">Div 2</div>以下是将其中一个容器的父容器设置为BFC容器的前后变化效果
解决父元素高度塌陷问题
回到我们今天的主题，还记得在上一篇的学习中我们通过设置BFC容器来消除浮动，解决高度塌陷问题。那么有哪些方法能触发BFC容器呢？
- 设置浮动 ：给父元素设置
float属性
当子元素浮动时，父元素也浮动，高度不会塌陷，但是可能会带来更多的问题，不建议使用
- 设置定位 ：给元素设置
position属性为absolute或fixed
高度塌陷通常指的是当父元素内部的所有子元素都脱离了文档流（比如通过绝对定位或浮动）时，父元素的高度不再由子元素支撑，在没有其他内容或边框、内边距等时变为0。
当子元素脱离文档流导致父元素发生高度塌陷时，将父元素也脱离文档流，将恢复高度
给出以下例子：
css
.bfc-wrapper {
position: absolute;
}
.div1,
.div2 {
margin: 50px;
background-color: lightblue;
padding: 10px;
float: left;
}
html
<div class="bfc-wrapper">
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
</div>所以当使用绝对定位和固定定位使父元素脱离文档流时，父元素高度不会塌陷。
- 设置
overflow：给元素设置overflow属性为hidden、scroll或auto
当为父元素设置 overflow时将触发BFC，清除浮动解决高度塌陷。
- 设置
display：给元素设置display属性为inline-block、table-cell、table-caption、flex或inline-flex
display: flex;会使容器成为一个块级元素，其子元素会按照 Flexbox 布局排列。display: inline-flex;会使容器成为一个行内级元素，这意味着容器本身会像inline-block那样显示，但它内部会按照 Flexbox 布局排列子元素。这允我们在不破坏文档流的情况下，对一组元素应用 Flexbox 布局。
阻止元素被浮动元素覆盖
在布局中，浮动元素可能会覆盖其他元素。通过将受影响的元素设置为BFC容器，可以防止其被浮动元素覆盖。
举个例子，比如下面这两个元素
当我们将被覆盖元素变成BFC容器时，两个元素将不会重叠
总结
在本文的学习中我们理解了什么是BFC容器，以及BFC容器的用途，用于解决的问题。在开发项目的过程中，BFC的运用是CSS开发的基本，熟悉掌握页面开发规则，能使得你的开发事半功倍。