BFC在布局中的应用解析，让你彻底搞懂BFC！

前端

2023-09-20 19:52:19

块级格式化上下文 (BFC)：主宰元素布局的秘密

想象一下 Web 布局像一场奇妙的芭蕾舞，每个元素都有自己的舞步，影响着其他元素的节奏。而块级格式化上下文 (BFC) 就像一个幕后的编舞家，控制着元素之间的和谐共舞。

揭秘 BFC 的魔法

BFC 是一个独立的渲染区域，从一个元素延伸到它的最后一个子元素。在这个舞台上，元素的浮动和垂直对齐不受外部元素的摆布。就像芭蕾舞演员不受观众影响一样，元素在 BFC 中优雅地表演着自己的动作。

那么，哪些元素会形成一个 BFC 呢？

根元素
浮动元素
绝对定位元素
Flex 容器元素
Grid 容器元素
overflow 不为 visible 的元素

BFC 的华丽舞步

BFC 在布局中扮演着至关重要的角色，它让我们能够：

清除浮动的烦恼： 浮动元素可能会让后续元素迷失方向。但通过将浮动元素放入一个 BFC，我们可以清除浮动，让后续元素优雅地排队。
垂直对齐元素的艺术： 在 BFC 中，元素的垂直对齐不受外部元素的影响。这就好比芭蕾舞演员在舞台上保持完美的纵队，不管舞台有多么拥挤。
创建多列布局的杰作： 通过在父元素上设置多个 BFC，我们可以轻松创建优雅的多列布局。每个 BFC 代表一列，元素在各自的列中整齐地垂直排列。
解决溢出的尴尬： 当元素的内容溢出其边界时，我们可以将元素放入一个 BFC 并设置 overflow 属性，就像给溢出的水找一个容身之所。

BFC 的精彩用例

两列布局的优雅舞姿：

.container {
  display: flex;
  flex-direction: row;
}

.column1, .column2 {
  flex: 1;
  height: 100vh;
  overflow: hidden;
}

.column1 {
  background-color: #f0f0f0;
}

.column2 {
  background-color: #ffffff;
}

清除浮动的救星：

.container {
  overflow: hidden;
}

.floated-element {
  float: left;
}

垂直对齐元素的和谐：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.aligned-element {
  height: 100px;
  width: 100px;
  background-color: #000000;
}