BFC（块级格式化上下文）：CSS布局的基石

前端

2023-10-29 06:53:36

在CSS布局中，BFC(块级格式化上下文)是一个非常重要的概念，它规定了块级元素在页面中的布局行为。理解BFC可以帮助我们更好地控制页面布局，并解决一些常见的布局问题。

触发BFC的条件

要触发BFC，需要满足以下条件之一：

元素是块级元素（如<div>、<p>、<ul>）
元素浮动（<float: left;>或<float: right;>）
元素绝对定位（<position: absolute;>或<position: fixed;>）
元素是表格元素（<table>、<tbody>、<tr>等）
元素是网格元素（<display: grid;>）
元素是弹性元素（<display: flex;>）
元素是内联元素，但设置了<display: block;>样式

BFC的特性

BFC具有以下特性：

BFC是一个独立的布局容器，其内部的元素不会影响BFC外部的元素。
BFC中的元素垂直排列，并且每个元素占据一行。
BFC中的元素不会与浮动元素重叠。
BFC中的元素不会被外边距折叠。
BFC中的元素可以包含内联元素和块级元素。

BFC的应用场景

BFC在CSS布局中有很多应用场景，例如：

创建多列布局
清除浮动
防止元素重叠
控制元素的垂直对齐方式
实现粘性布局

实际案例与示例代码

为了更好地理解BFC，我们来看几个实际案例和示例代码。

案例一：创建多列布局

/* 创建两列布局 */
.container {
  display: flex;
  flex-direction: row;
}

.column {
  flex: 1;
  padding: 10px;
  margin: 10px;
  background-color: #eee;
}

在这个案例中，我们使用<display: flex;>将容器元素.container设置为一个弹性布局，并使用<flex-direction: row;>将其设置为水平方向。然后，我们将子元素.column设置为一个弹性项目，并使用<flex: 1;>将其设置为占据容器的全部宽度。这样，我们就创建了一个两列布局。

案例二：清除浮动

/* 清除浮动 */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

在这个案例中，我们使用.clearfix类来清除浮动。我们在.clearfix类的伪元素:after中设置了<content: "";>和<display: block;>，这样就创建了一个空块级元素。然后，我们使用<clear: both;>来清除该元素两侧的浮动元素。这样，我们就清除掉了浮动元素的影响。