三大经典案例让你秒懂BFC：掌握网格布局必备！

BFC的定义

BFC（Block Formatting Context）是指块级格式化上下文，它是页面上一个独立的布局区域。元素在BFC中按照一定的规则排列和显示，不会受到其他元素的影响。

BFC的特性

BFC具有以下几个特性：

• 包含块级元素和浮动元素。
• BFC的内部元素不会影响BFC外部的元素。
• BFC外部的元素也不会影响BFC内部的元素。
• BFC可以包含多个BFC。

BFC的应用场景

BFC在CSS布局中有很多应用场景，其中最常见的就是网格布局。网格布局可以帮助我们创建复杂的布局，而BFC可以保证网格布局的正确显示。

案例一：BFC解决了浮动元素重叠问题

<div class="container">
  <div class="left">左边的浮动元素</div>
  <div class="right">右边的浮动元素</div>
  <div class="clear"></div>
</div>

.container {
  width: 100%;
}

.left {
  float: left;
  width: 50%;
  height: 100px;
  background-color: red;
}

.right {
  float: left;
  width: 50%;
  height: 100px;
  background-color: green;
}

.clear {
  clear: both;
}

在这个例子中，左边的浮动元素和右边的浮动元素会重叠。为了解决这个问题，我们可以给父元素添加一个BFC，这样左边的浮动元素和右边的浮动元素就不会重叠了。

.container {
  width: 100%;
  overflow: hidden;  // 添加overflow: hidden
}

案例二：BFC解决了垂直居中的问题

<div class="container">
  <div class="content">垂直居中的内容</div>
</div>

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  width: 50%;
  height: 50%;
  background-color: red;
}

在这个例子中，我们想让“.content”元素垂直居中。但是，由于“.content”元素不是BFC，所以它不能垂直居中。为了解决这个问题，我们可以给“.content”元素添加一个BFC。

.content {
  width: 50%;
  height: 50%;
  background-color: red;
  margin: 0 auto;  // 添加margin: 0 auto
}

案例三：BFC解决了清除浮动的问题

<div class="container">
  <div class="left">左边的浮动元素</div>
  <div class="right">右边的浮动元素</div>
</div>

.container {
  width: 100%;
}

.left {
  float: left;
  width: 50%;
  height: 100px;
  background-color: red;
}

.right {
  float: left;
  width: 50%;
  height: 100px;
  background-color: green;
}

在这个例子中，当我们删除“.clear”元素后，后面的内容会跑到浮动元素的下面。为了解决这个问题，我们可以给“.container”元素添加一个BFC。

.container {
  width: 100%;
  overflow: hidden;  // 添加overflow: hidden
}

总结

BFC是一个非常重要的CSS概念，它可以帮助我们控制元素的布局行为。通过本文中的三个经典案例，相信你已经对BFC有了更深入的了解。