BFC的含义与使用方法

了解BFC的使用方法是前端开发必备的基础，它可以帮助您更好的了解和操作元素。

BFC又叫块级格式化上下文，英文全称是Block Formatting Context，它能够产生一个独立的渲染区域。在该区域中，元素按从上到下的顺序排列，并且不会受到浮动元素的影响。

触发BFC的方式有：

• 根元素（html元素）
• 浮动元素
• 绝对定位元素
• display值被设置为inline-block、table-cell或table-caption的元素
• overflow值被设置为auto、scroll或hidden的元素
• position值被设置为absolute或fixed的元素

BFC的使用场景：

• 清除浮动： BFC可以用来清除浮动元素。当一个元素被设置为BFC时，其内部的浮动元素将不会影响其后的元素。
• 垂直对齐： BFC可以用来垂直对齐元素。当一个元素被设置为BFC时，其内部的元素将从顶部对齐。
• 响应式布局： BFC可以用来创建响应式布局。通过使用BFC，您可以创建出在不同设备上都能正确显示的布局。

以下是一个实际的例子：

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

<style>
.container {
  display: flex;
}

.left, .right {
  width: 200px;
  height: 200px;
  background-color: blue;
}

.center {
  width: auto;
  height: 200px;
  background-color: red;
}
</style>

在这个例子中，.center的宽度被两个浮动的元素压在了下面。若是想实现两边固定中间自适应，只需要给.container添加一个BFC即可。

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

<style>
.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.left, .right {
  width: 200px;
  height: 200px;
  background-color: blue;
}

.center {
  width: auto;
  height: 200px;
  background-color: red;
}
</style>

这样，.center的宽度就可以自适应了。