[zh-cn] Update 'block formatting context' (#14023)

Co-authored-by: A1lo <[email protected]>
mdn · Jul 4, 2023 · 60d3072 · 60d3072
1 parent 14270a1
commit 60d3072
Showing 1 changed file with 82 additions and 52 deletions.
diff --git a/files/zh-cn/web/guide/css/block_formatting_context/index.md b/files/zh-cn/web/guide/css/block_formatting_context/index.md
@@ -1,50 +1,50 @@
 ---
-title: 块格式化上下文
+title: 区块格式化上下文
 slug: Web/Guide/CSS/Block_formatting_context
 ---
 
-{{ CSSRef }}
+{{CSSRef}}
 
-**块格式化上下文**（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
+**区块格式化上下文**（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
 
 下列方式会创建块格式化上下文：
 
-- 根元素（`<html>`）
-- 浮动元素（{{ cssxref("float") }} 值不为 `none`）
-- 绝对定位元素（{{ cssxref("position") }} 值为 `absolute` 或 `fixed`）
-- 行内块元素（{{ cssxref("display") }} 值为 `inline-block`）
-- 表格单元格（{{ cssxref("display") }} 值为 `table-cell`，HTML 表格单元格默认值）
-- 表格标题（{{ cssxref("display") }} 值为 `table-caption`，HTML 表格标题默认值）
-- 匿名表格单元格元素（{{ cssxref("display") }} 值为 `table`、`table-row`、 `table-row-group`、`table-header-group`、`table-footer-group`（分别是 HTML table、tr、tbody、thead、tfoot 的默认值）或 `inline-table`）
-- {{ cssxref("overflow") }} 值不为 `visible`、`clip` 的块元素
-- {{ cssxref("display") }} 值为 `flow-root` 的元素
-- {{ cssxref("contain") }} 值为 `layout`、`content` 或 `paint` 的元素
-- 弹性元素（{{ cssxref("display") }} 值为 `flex` 或 `inline-flex` 元素的直接子元素），如果它们本身既不是 [flex](/zh-CN/docs/Glossary/Flex_Container)、[grid](/zh-CN/docs/Glossary/Grid_Container) 也不是 [table](/zh-CN/docs/Web/CSS/CSS_table) 容器
-- 网格元素（{{ cssxref("display") }} 值为 `grid` 或 `inline-grid` 元素的直接子元素），如果它们本身既不是 [flex](/zh-CN/docs/Glossary/Flex_Container)、[grid](/zh-CN/docs/Glossary/Grid_Container) 也不是 [table](/zh-CN/docs/Web/CSS/CSS_table) 容器
-- 多列容器（{{ cssxref("column-count") }} 或 {{ cssxref("column-width") }} 值不为 `auto`，包括`column-count` 为 `1`）
-- `column-span` 值为 `all` 的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中 ([规范变更](https://github.com/w3c/csswg-drafts/commit/a8634b96900279916bd6c505fda88dda71d8ec51), [Chrome bug](https://bugs.chromium.org/p/chromium/issues/detail?id=709362))
+- 文档的根元素（`<html>`）。
+- 浮动元素（即 {{ cssxref("float") }} 值不为 `none` 的元素）。
+- 绝对定位元素（{{ cssxref("position") }} 值为 `absolute` 或 `fixed` 的元素）。
+- 行内块元素（{{ cssxref("display") }} 值为 `inline-block` 的元素）。
+- 表格单元格（{{ cssxref("display") }} 值为 `table-cell`，HTML 表格单元格默认值）。
+- 表格标题（{{ cssxref("display") }} 值为 `table-caption`，HTML 表格标题默认值）。
+- 匿名表格单元格元素（{{ cssxref("display") }} 值为 `table`（HTML 表格默认值）、`table-row`（表格行默认值）、`table-row-group`（表格体默认值）、`table-header-group`（表格头部默认值）、`table-footer-group`（表格尾部默认值）或 `inline-table`）。
+- {{ cssxref("overflow") }} 值不为 `visible` 或 `clip` 的块级元素。
+- {{ cssxref("display") }} 值为 `flow-root` 的元素。
+- {{ cssxref("contain") }} 值为 `layout`、`content` 或 `paint` 的元素。
+- 弹性元素（{{ cssxref("display") }} 值为 `flex` 或 `inline-flex` 元素的直接子元素），如果它们本身既不是[弹性](/zh-CN/docs/Glossary/Flex_Container)、[网格](/zh-CN/docs/Glossary/Grid_Container)也不是[表格](/zh-CN/docs/Web/CSS/CSS_table)容器。
+- 网格元素（{{ cssxref("display") }} 值为 `grid` 或 `inline-grid` 元素的直接子元素），如果它们本身既不是[弹性](/zh-CN/docs/Glossary/Flex_Container)、[网格](/zh-CN/docs/Glossary/Grid_Container)也不是[表格](/zh-CN/docs/Web/CSS/CSS_table)容器。
+- 多列容器（{{ cssxref("column-count") }} 或 {{ cssxref("column-width") }} 值不为 `auto`，且含有 `column-count: 1` 的元素）。
+- `column-span` 值为 `all` 的元素始终会创建一个新的格式化上下文，即使该元素没有包裹在一个多列容器中（[规范变更](https://github.com/w3c/csswg-drafts/commit/a8634b96900279916bd6c505fda88dda71d8ec51)、[Chrome bug](https://bugs.chromium.org/p/chromium/issues/detail?id=709362)）
 
 格式化上下文影响布局，通常，我们会为定位和清除浮动创建新的 BFC，而不是更改布局，因为它将：
 
-- 包含内部浮动
-- 排除外部浮动
-- 阻止 [外边距重叠](/zh-CN/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)
+- 包含内部浮动。
+- 排除外部浮动。
+- 阻止[外边距重叠](/zh-CN/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)。
 
-> **备注：** flex/grid 容器（{{ cssxref("display") }}：flex/grid/inline-flex/inline-grid）建立新的 flex/grid 格式上下文，除布局之外，它与块格式上下文类似。flex/grid 容器中没有可用的浮动子级，但排除外部浮动和阻止外边距重叠仍然有效。
+> **备注：** 弹性/网格容器（{{ cssxref("display") }}：flex/grid/inline-flex/inline-grid）建立新的弹性/网格格式化上下文，除布局之外，它与区块格式化上下文类似。弹性/网格容器中没有可用的浮动子级，但排除外部浮动和阻止外边距重叠仍然有效。
 
 ## 示例
 
 ### 包含内部浮动
 
-让浮动内容和周围的内容等高。
+BFC 使得让浮动内容和周围的内容等高。
 
 为了更好的理解 BFC，我们先看看下面这些内容。
 
-在下面的例子中，我们让 `<div>` 元素浮动，并给它一个 `border` 效果。`<div>` 里的内容现在已经在浮动元素周围浮动起来了。由于浮动的元素比它旁边的元素高，所以 `<div>` 的边框穿出了浮动。正如我们在 [In Flow and Out of Flow](/zh-CN/docs/Web/CSS/CSS_flow_layout/In_flow_and_out_of_flow) 中解释的，浮动脱离了文档流，所以 `<div>` 的 `background` 和 `border` 仅仅包含了内容，不包含浮动。
+在下面的例子中，我们让 `<div>` 元素浮动，并给它应用 `border` 效果。`<div>` 里的内容现在已经在浮动元素周围浮动起来了。由于浮动的元素比它旁边的元素高，所以 `<div>` 的边框穿出了浮动。正如我们在[流内与流外](/zh-CN/docs/Web/CSS/CSS_flow_layout/In_flow_and_out_of_flow)指南中解释的，浮动脱离了文档流，所以 `<div>` 的 `background` 和 `border` 仅仅包含了内容，不包含浮动。
 
 **使用 `overflow: auto`**
 
-在创建包含浮动元素的 BFC 时，通常的做法是设置父元素 `overflow: auto` 或者其他除默认的 `overflow: visible` 以外的值。`<div>` 元素变成布局中的迷你布局，任何子元素都会被包含进去。
+在创建包含浮动元素的 BFC 时，通常的做法是设置父元素 `overflow: auto` 或者其他除默认的 `overflow: visible` 以外的值。`<div>` 元素变成布局中的小型布局，任何子元素都会被包含进去。
 
 使用 `overflow` 创建新的 BFC，是因为 `overflow` 属性会告诉浏览器应该怎样处理溢出的内容。如果使用它仅仅为了创建 BFC，你可能会遇到不希望出现的滚动条或阴影，需要注意。另外，对于后续的开发者，可能不清楚当时为什么使用 `overflow`，所以最好添加一些注释来解释为什么这样做。
 
@@ -54,27 +54,27 @@ slug: Web/Guide/CSS/Block_formatting_context
 
 给 `<div>` 元素设置 `display: flow-root` 属性后，`<div>` 中的所有内容都会参与 BFC，浮动的内容不会从底部溢出。
 
-你可以从 `flow-root` 这个值的名字上看出来，它创建一个新的用于流式布局的上下文，类似于浏览器的根（`html`）元素。
+你可以从 `flow-root` 这个值的名字上看出来，它创建一个新的用于流式布局的上下文，行为如同 `root`（在浏览器中是 `<html>`）元素。
 
 #### HTML
 
 ```html
 <section>
   <div class="box">
-    <div class="float">I am a floated box!</div>
-    <p>I am content inside the container.</p>
+    <div class="float">我是浮动的盒子！</div>
+    <p>我是容器内的内容。</p>
   </div>
 </section>
 <section>
   <div class="box" style="overflow:auto">
-    <div class="float">I am a floated box!</div>
-    <p>I am content inside the <code>overflow:auto</code> container.</p>
+    <div class="float">我是浮动的盒子！</div>
+    <p>我是 <code>overflow:auto</code> 容器内部的内容。</p>
   </div>
 </section>
 <section>
   <div class="box" style="display:flow-root">
-    <div class="float">I am a floated box!</div>
-    <p>I am content inside the <code>display:flow-root</code> container.</p>
+    <div class="float">我是浮动的盒子！</div>
+    <p>我是 <code>display:flow-root</code> 容器内部的内容。</p>
   </div>
 </section>
 ```
@@ -113,11 +113,11 @@ section {
 
 ```html
 <section>
-  <div class="float">Try to resize this outer float</div>
-  <div class="box"><p>Normal</p></div>
+  <div class="float">试试重新调整这个外部浮动元素的大小</div>
+  <div class="box"><p>普通</p></div>
 </section>
 <section>
-  <div class="float">Try to resize this outer float</div>
+  <div class="float">试试重新调整这个外部浮动元素的大小</div>
   <div class="box" style="display:flow-root"><p><code>display:flow-root</code><p></div>
 </section>
 ```
@@ -138,7 +138,7 @@ section {
 }
 .float {
   float: left;
-  overflow: hidden; /* required by resize:both */
+  overflow: hidden; /* resize:both 所必需的样式 */
   resize: both;
   margin-right:25px;
   width: 200px;
@@ -151,27 +151,55 @@ section {
 
 {{EmbedLiveSample("排除外部浮动", 200, 330)}}
 
-与 `inline-block` 需要设置 `width: <percentage>` 不同的是，在示例中，我们不需要设置右侧 `div` 元素的宽度
+与 `inline-block` 需要设置 `width: <percentage>` 不同的是，在示例中，我们不需要设置右侧 `div` 元素的宽度。
 
-请注意，flexbox 是在现代 CSS 中实现多列布局的更有效的方法。
+请注意，弹性盒子是在现代 CSS 中实现多列布局的更有效的方法。
 
-### 外边距重叠
+### 防止外边距重叠
 
-创建新的 BFC 避免两个相邻元素之间的[外边距重叠](/zh-CN/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) 。
+你可以创建新的 BFC 避免两个相邻元素之间的[外边距重叠](/zh-CN/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)。
 
-#### HTML
+#### 外边距重叠示例
+
+在这个示例中我们有两个相邻的 {{HTMLElement("div")}} 元素，每个元素在垂直方向上含有 `10px` 的外边距。由于外边距重叠作用，垂直方向上它们之间将具有 10 像素的间距，而不是所期望的 20 像素。
 
 ```html
 <div class="blue"></div>
-<div class="red-outer">
-  <div class="red-inner">red inner</div>
-</div>
+<div class="red"></div>
 ```
 
-#### CSS
+```css
+.blue,
+.red {
+  height: 50px;
+  margin: 10px 0;
+}
+
+.blue {
+  background: blue;
+}
+
+.red {
+  background: red;
+}
+```
+
+{{EmbedLiveSample("外边距重叠示例", 120, 170)}}
+
+#### 防止外边距重叠
+
+在这个示例中，我们将第二个 `<div>` 包裹在另外一个 `<div>` 之中，以创建一个新的 BFC，防止外边距重叠。
+
+```html
+<div class="blue"></div>
+<div class="outer">
+  <div class="red"></div>
+</div>
+```
 
 ```css
-.blue, .red-inner {
+.blue,
+.red {
   height: 50px;
   margin: 10px 0;
 }
@@ -180,36 +208,38 @@ section {
   background: blue;
 }
 
-.red-outer {
-  overflow: hidden;
+.red {
   background: red;
 }
+
+.outer {
+  overflow: hidden;
+  background: transparent;
+}
 ```
 
-{{EmbedLiveSample("外边距重叠", 120, 170)}}
+{{EmbedLiveSample("防止外边距重叠", 120, 170)}}
 
 ## 规范
 
 {{Specifications}}
 
 ## 参见
 
-- {{ cssxref("float") }}, {{ cssxref("clear") }}
+- {{ cssxref("float") }}、{{ cssxref("clear") }}
 - CSS 重要概念：
   - [CSS 语法](/zh-CN/docs/Web/CSS/Syntax)
   - [@ 规则](/zh-CN/docs/Web/CSS/At-rule)
   - [注释](/zh-CN/docs/Web/CSS/Comments)
   - [优先级](/zh-CN/docs/Web/CSS/Specificity)
-  - [继承](/zh-CN/docs/Web/CSS/inheritance)
+  - [继承](/zh-CN/docs/Web/CSS/Inheritance)
   - [盒模型](/zh-CN/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
   - [布局模式](/zh-CN/docs/Web/CSS/Layout_mode)
   - [视觉格式化模型](/zh-CN/docs/Web/CSS/Visual_formatting_model)
   - [外边距合并](/zh-CN/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)
   - 值
     - [初始值](/zh-CN/docs/Web/CSS/initial_value)
     - [计算值](/zh-CN/docs/Web/CSS/computed_value)
-    - [解析值](/zh-CN/docs/Web/CSS/resolved_value)
-    - [指定值](/zh-CN/docs/Web/CSS/specified_value)
     - [应用值](/zh-CN/docs/Web/CSS/used_value)
     - [实际值](/zh-CN/docs/Web/CSS/actual_value)
   - [属性值定义语法](/zh-CN/docs/Web/CSS/Value_definition_syntax)