块级格式上下文（BFC）**

CSS 中的块级格式上下文（BFC）

在 CSS 中，块级格式上下文（BFC）是一个隔离区域，用于确定页面元素的布局和格式化行为。BFC 是一个独立的盒子，它根据自身规则格式化其子元素，不受外部元素的影响。

BFC 的触发条件

块级元素在满足以下条件之一时会创建 BFC：

• <float>：包含浮动元素（<float: left/right>）
• <overflow>：具有非<visible>溢出（<overflow: hidden/scroll/auto>）
• <display>：具有<block>或<inline-block>显示属性
• <position>：具有<absolute>或<fixed>定位
• <table>：包含表格（<table>元素）
• <inline-flex>：包含<inline-flex>布局容器

BFC 的作用

BFC 主要有以下几个作用：

• 浮动元素隔离： BFC 中的浮动元素不会影响其外部元素的布局，而是在 BFC 内部自行排列。
• 溢出控制： BFC 可以防止其子元素溢出其边界，使其内部内容始终保持在指定区域内。
• 块级布局： BFC 内的块级元素按照垂直方向排列，不会发生内容重叠。
• 页面布局控制： 巧妙利用 BFC 可以控制页面的整体布局，隔离不同部分的内容。

实用示例

浮动元素隔离：

.container {
  width: 500px;
}

.float-left {
  float: left;
  width: 200px;
  height: 200px;
  background: red;
}

.text {
  width: 300px;
}

在上面示例中，<float-left>元素浮动在左侧，但它不会影响<text>元素的布局。

溢出控制：

.overflow-hidden {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.content {
  height: 400px;
  background: blue;
}

在上面示例中，<content>元素的内容超出<overflow-hidden>元素，但它不会溢出 BFC。

块级布局：

.block-container {
  display: block;
}

.block-item {
  display: block;
  width: 100px;
  height: 100px;
  background: green;
}

在上面示例中，<block-item>元素按照垂直方向排列，不会重叠。

结论

块级格式上下文（BFC）是 CSS 中一种有用的工具，它可以隔离元素并控制其布局和格式化。熟练掌握 BFC 可以帮助开发者创建更灵活、可控的网页设计。

---