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 index c6b944de983a70..b88c2e6d47714f 100644 --- 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 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 下列方式会创建块格式化上下文： -- 根元素（``） -- 浮动元素（{{ 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)) +- 文档的根元素（``）。 +- 浮动元素（即 {{ 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，我们先看看下面这些内容。 -在下面的例子中，我们让 `
` 元素浮动，并给它一个 `border` 效果。`
` 里的内容现在已经在浮动元素周围浮动起来了。由于浮动的元素比它旁边的元素高，所以 `
` 的边框穿出了浮动。正如我们在 [In Flow and Out of Flow](/zh-CN/docs/Web/CSS/CSS_flow_layout/In_flow_and_out_of_flow) 中解释的，浮动脱离了文档流，所以 `
` 的 `background` 和 `border` 仅仅包含了内容，不包含浮动。 +在下面的例子中，我们让 `
` 元素浮动，并给它应用 `border` 效果。`
` 里的内容现在已经在浮动元素周围浮动起来了。由于浮动的元素比它旁边的元素高，所以 `
` 的边框穿出了浮动。正如我们在[流内与流外](/zh-CN/docs/Web/CSS/CSS_flow_layout/In_flow_and_out_of_flow)指南中解释的，浮动脱离了文档流，所以 `
` 的 `background` 和 `border` 仅仅包含了内容，不包含浮动。 **使用 `overflow: auto`** -在创建包含浮动元素的 BFC 时，通常的做法是设置父元素 `overflow: auto` 或者其他除默认的 `overflow: visible` 以外的值。`
` 元素变成布局中的迷你布局，任何子元素都会被包含进去。 +在创建包含浮动元素的 BFC 时，通常的做法是设置父元素 `overflow: auto` 或者其他除默认的 `overflow: visible` 以外的值。`
` 元素变成布局中的小型布局，任何子元素都会被包含进去。 使用 `overflow` 创建新的 BFC，是因为 `overflow` 属性会告诉浏览器应该怎样处理溢出的内容。如果使用它仅仅为了创建 BFC，你可能会遇到不希望出现的滚动条或阴影，需要注意。另外，对于后续的开发者，可能不清楚当时为什么使用 `overflow`，所以最好添加一些注释来解释为什么这样做。 @@ -54,27 +54,27 @@ slug: Web/Guide/CSS/Block_formatting_context 给 `
` 元素设置 `display: flow-root` 属性后，`
` 中的所有内容都会参与 BFC，浮动的内容不会从底部溢出。 -你可以从 `flow-root` 这个值的名字上看出来，它创建一个新的用于流式布局的上下文，类似于浏览器的根（`html`）元素。 +你可以从 `flow-root` 这个值的名字上看出来，它创建一个新的用于流式布局的上下文，行为如同 `root`（在浏览器中是 ``）元素。 #### HTML ```html
-
I am a floated box!
-

I am content inside the container.

+
我是浮动的盒子！
+

我是容器内的内容。

-
I am a floated box!
-

I am content inside the overflow:auto container.

+
我是浮动的盒子！
+

我是 overflow:auto 容器内部的内容。

-
I am a floated box!
-

I am content inside the display:flow-root container.

+
我是浮动的盒子！
+

我是 display:flow-root 容器内部的内容。

``` @@ -113,11 +113,11 @@ section { ```html
-
Try to resize this outer float
-

Normal

+
试试重新调整这个外部浮动元素的大小
+

普通

-
Try to resize this outer float
+
试试重新调整这个外部浮动元素的大小

display:flow-root

``` @@ -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: ` 不同的是，在示例中，我们不需要设置右侧 `div` 元素的宽度 +与 `inline-block` 需要设置 `width: ` 不同的是，在示例中，我们不需要设置右侧 `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
-
-
red inner
-
+
``` -#### CSS +```css +.blue, +.red { + height: 50px; + margin: 10px 0; +} + +.blue { + background: blue; +} + +.red { + background: red; +} +``` + +{{EmbedLiveSample("外边距重叠示例", 120, 170)}} + +#### 防止外边距重叠 + +在这个示例中，我们将第二个 `
` 包裹在另外一个 `
` 之中，以创建一个新的 BFC，防止外边距重叠。 + +```html +
+
+
+
+``` ```css -.blue, .red-inner { +.blue, +.red { height: 50px; margin: 10px 0; } @@ -180,13 +208,17 @@ section { background: blue; } -.red-outer { - overflow: hidden; +.red { background: red; } + +.outer { + overflow: hidden; + background: transparent; +} ``` -{{EmbedLiveSample("外边距重叠", 120, 170)}} +{{EmbedLiveSample("防止外边距重叠", 120, 170)}} ## 规范 @@ -194,13 +226,13 @@ section { ## 参见 -- {{ 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) @@ -208,8 +240,6 @@ section { - 值 - [初始值](/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)