什么是BFC？ CSS 使用伪元素清除浮动的方法-前端开发

BFC（Block Formatting Context，块级格式化上下文）是 CSS 中的一个概念。它是一个独立的渲染区域，拥有自己的渲染规则。在一个 BFC 中，所有的元素按照一定的规则进行排布，这些规则可以帮助我们解决很多常见的页面布局问题。以下是BFC的相关属性

BFC（Block Formatting Context，块级格式化上下文）是 CSS 中的一个概念。它是一个独立的渲染区域，拥有自己的渲染规则。在一个 BFC 中，所有的元素按照一定的规则进行排布，这些规则可以帮助我们解决很多常见的页面布局问题。以下是BFC的相关属性和触发方式：

触发BFC的方式

根元素或其他包含它的元素
浮动：float 的值不是 none
绝对定位：position 的值不是 static 或 relative
行内块：display 的值变为 inline-block
表格单元格：display 的值变为 table-cell、table-caption 或 inline-table
overflow 的值不是 visible

BFC的特性

内部的 Box 会在垂直方向，一个接一个地放置
Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
常见的清除浮动现象（父元素因为子元素浮动导致高度坍塌）不再存在，除非是用来达到这种效果的特殊方式
不会与浮动元素重叠
计算 BFC 的高度时，浮动元素也参与计算

BFC布局方式可以解决很多问题，比如让容器自适应内容的高度，防止margin重叠等。

接下来，我们谈一下使用伪元素清除浮动的方法。但首先我们来看一下什么是浮动。

什么是浮动

浮动是CSS中一种常用的定位方式，本质上就是让元素脱离文档流，并沿着父元素的边缘进行浮动定位。

浮动往往用于实现文本环绕效果或者图片的流动布局，但是由于浮动元素脱离文档流，所以可能引起一些布局上的问题。

我们常用的情况是将两个块级元素并排放置，代码如下：

<div class="container">
  <div class="left">1</div>
  <div class="right">2</div>
</div>

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

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

这个时候，你会发现.container元素的高度为0，页面布局出现问题，这时候我们就需要清除浮动来解决这个问题。

伪元素清除浮动的方式

我们可以使用空的块级元素或者清除浮动的技巧来清除浮动，不过这两种方式都比较繁琐，而且会在文档流中增加一些不必要的标记。

另外，我们还可以使用伪元素来清除浮动，这是一种更为简单、优雅的方式。

代码如下：

.container::after {
  content: "";
  display: block;
  clear: both;
}

我们在.container元素的后面添加一个伪元素::after，并设置其content属性为空、display属性为block，clear属性为both，这样就可以清除.container元素的浮动了。

除主流浏览器都支持伪元素，有些古老的浏览器可能会有问题，不过并不影响这种方式的使用。

下面提供一个较为完整的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BFC and Clearfix</title>

  <style>
    .container {
      background: #f5f5f5;
    }
    .left {
      width: 50%;
      height: 100px;
      background-color: red;
      float: left;
    }
    .right {
      width: 50%;
      height: 100px;
      background-color: blue;
      float: left;
    }
    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="container clearfix">
    <div class="left">1</div>
    <div class="right">2</div>
  </div>
</body>
</html>

我们给.container元素添加了.clearfix和.container两个class，.clearfix用于添加::after伪元素来清除浮动，.container用于添加背景颜色。

在实际使用中，我们只需要将需要清除浮动的元素的父元素添加一个.clearfix的类即可。

除此之外，我们还可以使用BFC来清除浮动，这种方式更为常用。