initial commit

6 files changed, 529 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html b/files/zh-cn/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html
new file mode 100644
index 0000000000..e977a07acb
--- /dev/null
+++ b/files/zh-cn/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html
@@ -0,0 +1,130 @@
+---
+title: 常规流中的块和内联布局
+slug: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow
+translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">在这篇指南中，我们会探讨块级元素和内联元素在常规流中是怎样工作的。</p>
+
+<p class="summary">在CSS 2.1规范中我们定义了<a href="https://www.w3.org/TR/CSS2/visuren.html#normal-flow">常规流（Normal Flow）</a>。常规流中的任何一个盒子总是某个<em>格式区域</em>（<em>formatting context</em>）中的一部分。块级盒子是在<em>块格式区域</em>（<em>block formatting context</em>）中工作的盒子，而内联盒子是在<em>内联格式区域</em>（<em>inline formatting context</em>）中工作的盒子。任何一个盒子总是块级盒子或内联盒子中的一种。</p>
+
+<p class="summary">规范中还规定了块格式区域与内联格式区域中的元素行为。对于块级格式环境，规范内规定：</p>
+
+<blockquote>
+<p>“在一个块格式区域中，盒子会从包含块的顶部开始，按序垂直排列。同级盒子间的垂直距离会由“margin”属性决定。相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠。</p>
+
+<p>在一个块格式区域中，每个盒子的左外边缘会与包含块左边缘重合（如果是从右到左的排版顺序，则盒子的右外边缘与包含块右边缘重合）。” - 9.4.1</p>
+</blockquote>
+
+<p>对于内联格式区域中的元素：</p>
+
+<blockquote>
+<p>“在内联格式区域中，盒子会从包含块的顶部开始，按序水平排列。只有水平外边距、边框合内边距会被保留。这些盒子可以以不同的方式在垂直方向上对齐：可以底部对齐或顶部对其，或者按文字底部进行对齐。我们把包含一串盒子的矩形区域称为一个线条框。（The rectangular area that contains the boxes that form a line is called a line box.）” - 9.4.2</p>
+</blockquote>
+
+<p>需要注意的是，CSS 2.1规范将文档的书写模式定义为从上到下横板排布，这从块级盒子的垂直间距这一属性就能看出来（Note that the CSS 2.1 specification describes documents as being in a horizontal, top to bottom writing mode. For example, by describing vertical distance between block boxes.）。在竖版书写模式工作时，块元素和内联元素的行为是相同的，关于这个我们将在未来的流布局与书写模式指南中进行探讨。</p>
+
+<h2 id="块格式区域中的元素">块格式区域中的元素</h2>
+
+<p>比如在英语环境中，块元素工作于横板书写模式中，此时的块元素会垂直排布，一个在另一个之下。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16125/mdn-horizontal.png" style="height: 382px; width: 521px;"></p>
+
+<p>而在竖版书写模式中，块元素会水平排布。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16126/mdn-vertical.png" style="height: 382px; width: 418px;"></p>
+
+<p>在本指南的例子中，我们使用的是英语，因此会按横板模式进行书写。不过，即使您的文档是按照竖版模式进行书写的，描述的所有内容也都应该以相同的方式工作。</p>
+
+<p>如规范中所定义，外边距使得两个块级盒子分开。这个例子展示了一个非常简单的由两个段落组成的排版，每个段落都加了一个边框。浏览器的默认样式表通过增加外边距（margin）的方式在每个段落的顶部和底部留出一定空间。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}</p>
+
+<p>如果我们将p元素的边距设置为0，两个边框会紧贴在一起。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}</p>
+
+<p>默认情况下，块级元素将占据这一内联方向的所有空间，因此我们的段落会铺开分布在多行，尽可能排满他的包含块。（By default block elements will consume all of the space in the inline direction, so our paragraphs spread out and get as big as they can inside their containing block.）如果限定了段落元素的宽度，第二个段落仍然会排布在第一个段落的下面——即使有足够空间使它们并排。每个块级元素都会从包含块的起始边开始，因此，在当前书写模式下，所有句子会从包含块的起始边开始。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}</p>
+
+<h3 id="外边距折叠">外边距折叠</h3>
+
+<p>在规范中提到，块级元素之间的外边距会发生折叠。这意味着，如果一个具有上边距的元素排在在一个具有下边距的元素之下时，他们之间的间距不会是这两个外边距的和，即外边距会发生折叠，简单来说就是，间距与两个外边距中的较大者一样大。</p>
+
+<p>在下面的例子中，段落的上边距设为<code>20px</code>，下边距设为<code>40px</code>，而段落之间的间距大小会是<code>40px</code>。这是因为第二段中的上边距比较小被折叠，间距跟随了第一个段落更大的下边距。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}</p>
+
+<p>你可以在我们的文章《<a href="/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">掌握外边距折叠</a>》中阅读更多关于这一部分的内容。</p>
+
+<div class="note">
+<p>注：如果不确定是否发生了外边距折叠，你可以使用浏览器的开发人员工具查看盒模型。准确的外边距值可以帮助你判断是否有外边距折叠发生。<br>
+  </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16124/box-model.png" style="height: 848px; width: 828px;"></p>
+</div>
+
+<h2 id="内联格式区域中的元素">内联格式区域中的元素</h2>
+
+<p>Inline elements display one after the other in the direction that sentences run in that particular writing mode. While we don’t tend to think of inline elements as having a box, as with everything in CSS they do. These inline boxes are arranged one after the other. If there is not enough space in the containing block for all of the boxes a box can break onto a new line. The lines created are known as line boxes.<br>
+ 内联元素按照句子在特定书写模式下运行的方向依次显示。虽然我们不倾向于认为内联元素有一个框，就像CSS中的所有元素一样。这些内嵌的盒子一个接一个排列。如果包含块中没有足够的空间容纳所有框，则框可以换行。创建的行称为行框。</p>
+
+<p>In the following example we have three inline boxes created by a paragraph with a strong element inside it.<br>
+ 在下面的示例中，我们有三个由段落创建的内联框，其中包含一个强元素。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}</p>
+
+<p>The boxes around the words before the strong element and after the strong element are referred to as anonymous boxes, boxes introduced to ensure that everything is wrapped in a box, but ones that we cannot target directly.<br>
+ 在强元素前和强元素后的单词周围的框称为匿名框，引入的框确保所有内容都包装在一个框中，但我们不能直接针对它们。</p>
+
+<p>The line box size in the block direction (so the height when working in English) is defined by the tallest box inside it. In the next example I have made the strong element 300%, that content now defines the height of the line box on that line.<br>
+ 块方向上的线框大小（以英文工作时的高度为准）由其内部最高的框定义。在下一个示例中，我将强元素300%设为内容，该内容现在定义了该行上行框的高度。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}</p>
+
+<p>Find out more about how Block and Inline Boxes behave in our Guide to the <a href="/en-US/docs/Web/CSS/Visual_formatting_model">Visual Formatting Model</a>.<br>
+ 在我们的视觉格式模型指南中，了解更多关于块和内联框的行为。</p>
+
+<h2 id="The_display_property_and_flow_layout_显示属性和流布局编辑">The <code>display</code> property and flow layout<br>
+ 显示属性和流布局编辑</h2>
+
+<p>In addition to the rules existing in CSS2.1, new levels of CSS further describes the behaviour of block and inline boxes. The <code>display</code> property defines how a box, and any boxes inside it behaves. In the CSS Display Model Level 3 we can learn more about how the display property changes the behaviour of boxes and the boxes they generate.<br>
+ 除了CSS2.1中现有的规则之外，新级别的CSS还进一步描述了块和内联框的行为。“显示”属性定义框及其内部的所有框的行为方式。在CSS显示模型级别3中，我们可以进一步了解显示属性如何更改框及其生成的框的行为。</p>
+
+<p>The display type of an element defines the outer display type, this dictates how the box displays alongside other elements in the same formatting context. It also defines the inner display type, which dictates how boxes inside this element behave. We can see this very clearly when considering a flex layout. In the example below I have a div, which I have given <code>display: flex</code>. The flex container behaves like a block element, it displays on a new line and takes up all of the space it can in the inline direction. This is the outer display type of <code>block</code>.<br>
+ 一个元素的显示类型定义了外部显示类型，这规定了该框如何与同一格式上下文中的其他元素一起显示。它还定义了内部显示类型，该类型指示此元素内的框的行为方式。在考虑灵活布局时，我们可以很清楚地看到这一点。在下面的示例中，我有一个DIV，我已经给出了display:flex。flex容器的行为类似于一个块元素，它显示在一条新行上，并占用它在内联方向上可以占用的所有空间。这是块的外部显示类型。</p>
+
+<p>The flex items however are participating in a flex formatting context, because their parent is the element with display: flex, which has an inner display type of flex, establishing the flex formatting context for the direct children.<br>
+ 但是，flex项正在参与flex格式上下文，因为它们的父级是带有display:flex的元素，后者具有flex的内部显示类型，为直接子级建立flex格式上下文。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}</p>
+
+<p>Therefore you can think of every box in CSS working in this way. The box itself has an outer display type, so it knows how to behave alongside other boxes. It then has an inner display type which changes the way its children behave. Those children then have an outer and inner display type too. The flex items in the previous example become flex level boxes, so their outer display type is dictated by way of them being part of the flex formatting context. They have an inner display type of <em>flow</em> however, meaning that their children participate in normal flow. Items nested inside our flex item lay themselves out as block and inline elements unless something changes their display type.<br>
+ 因此，您可以想到CSS中的每个框都是以这种方式工作的。盒子本身有一个外部显示类型，所以它知道如何与其他盒子一起工作。然后它有一个内部显示类型，它改变了它的子对象的行为方式。然后，这些子级也有一个外部和内部显示类型。上一个示例中的flex项变为flex级别框，因此它们的外部显示类型取决于它们是flex格式上下文的一部分。然而，他们有一种内在的流动显示类型，这意味着他们的孩子参与正常的流动。嵌套在flex项中的项将自己设置为块和内联元素，除非有什么改变了它们的显示类型。</p>
+
+<p>This concept of the outer and inner display type is important as this tells us that a container using a layout method such as Flexbox (<code>display: flex</code>) and Grid Layout (<code>display: grid</code>) is still participating in block and inline layout, due to the outer display type of those methods being <code>block</code>.<br>
+ 外部和内部显示类型的概念很重要，因为这告诉我们，由于这些方法的外部显示类型为块，因此使用flexbox（display:flex）和grid layout（display:grid）等布局方法的容器仍在参与块和内联布局。</p>
+
+<h3 id="Changing_the_Formatting_Context_an_element_participates_in_更改元素参与的格式上下文">Changing the Formatting Context an element participates in<br>
+ 更改元素参与的格式上下文</h3>
+
+<p>Browsers display items as part of a block or inline formatting context in terms of what normally makes sense for that element. For example a strong element is used to highlight a word, and displays bold in browsers. It would not generally make sense for that strong element to be displayed as a block level element, breaking onto a new line. If you did want all strong elements to display as block elements, you could do so by setting <code>display: block</code> on <code>strong</code>. This means that you can always use the most semantic HTML element to markup your content, and then change the way it displays using CSS.<br>
+ 浏览器将项目显示为块或内联格式上下文的一部分，根据该元素通常的意义。例如，强元素用于突出显示单词，并在浏览器中显示粗体。一般来说，将该强元素显示为块级元素并中断到新行是没有意义的。如果确实希望所有强元素显示为块元素，可以通过将display:block设置为强来实现。这意味着您可以始终使用最语义的HTML元素标记内容，然后使用CSS更改其显示方式。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}</p>
+
+<h2 id="Summary_总结">Summary 总结</h2>
+
+<p>In this guide we have looked at how elements display in normal flow, as block and inline elements. Due to the default behaviour of these elements, an HTML document with no CSS styling at all, will display in a readable way. By understanding how normal flow works you will find layout easier, as you understand the starting point for making changes to how elements are displayed.<br>
+ 在本指南中，我们研究了元素在正常流中如何显示为块和内联元素。由于这些元素的默认行为，一个完全没有CSS样式的HTML文档将以可读的方式显示。通过了解正常流的工作方式，您将更容易找到布局，因为您了解更改元素显示方式的起点。</p>
+
+<h2 id="See_Also_另请参见">See Also 另请参见</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model">CSS Basic Box Model</a></li>
+ <li><em><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></em> - Learn Layout</li>
+ <li><a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Block-level_elements">Block-level elements</a></li>
+</ul>
diff --git a/files/zh-cn/web/css/css_flow_layout/flow_layout_and_overflow/index.html b/files/zh-cn/web/css/css_flow_layout/flow_layout_and_overflow/index.html
new file mode 100644
index 0000000000..5c3f6a9489
--- /dev/null
+++ b/files/zh-cn/web/css/css_flow_layout/flow_layout_and_overflow/index.html
@@ -0,0 +1,82 @@
+---
+title: Flow Layout and Overflow 流布局和溢出
+slug: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow
+translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow
+---
+<p class="summary">When there is more content than can fit into a container, an overflow situation occurs. Understanding how overflow behaves is important in dealing with any element with a constrained size in CSS. This guide explains how overflow works when working with normal flow.<br>
+ 当容器中的内容超过可容纳的范围时，就会发生溢出情况。了解溢出的行为对于处理CSS中大小受限的任何元素都很重要。本指南解释了使用正常流时溢出是如何工作的。</p>
+
+<h2 id="What_is_overflow什么是溢出？">What is overflow?什么是溢出？</h2>
+
+<p>Giving an element a fixed height and width, then adding significant content to the box, creates a basic overflow example:<br>
+ 为元素赋予固定的高度和宽度，然后向框中添加重要内容，将创建一个基本的溢出示例：</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/overflow.html", '100%', 700)}}</p>
+
+<p>The content goes into the box. Once it fills the box, it continues to overflow in a visible way, displaying content outside the box, potentially displaying under subsequent content. The property that controls how overflow behaves is the <code><a href="/en-US/docs//Web/CSS/overflow">overflow</a></code> property which has an initial value of <code>visible</code>. This is why we can see the overflow content.<br>
+ 内容将进入框中。一旦填充了该框，它将继续以可见的方式溢出，在框外显示内容，可能在随后的内容下显示。控制溢出行为的属性是初始值为Visible的溢出属性。这就是为什么我们可以看到溢出内容。</p>
+
+<h2 id="Controlling_overflow控制溢出">Controlling overflow控制溢出</h2>
+
+<p>There are other values that control how overflow content behaves. To hide overflowing content use a value of <code>hidden</code>. This may cause some of your content to not be visible.<br>
+ 还有其他值控制溢出内容的行为。要隐藏溢出的内容，请使用值hidden。这可能会导致某些内容不可见。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/hidden.html", '100%', 700)}}</p>
+
+<p>Using a value of <code>scroll</code> contains the content in its box and add scrollbars to enable viewing it. Scrollbars will be added even if the content fits in the box.<br>
+ 使用值scroll包含其框中的内容，并添加滚动条以启用查看。即使内容适合该框，也将添加滚动条。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/scroll.html", '100%', 700)}}</p>
+
+<p>Using a value of <code>auto</code> will display the content with no scrollbars if the content fits inside the box. If it doesn’t fit then scrollbars will be added. Comparing the next example with the example for <code>overflow: scroll</code> you should see <code>overflow scroll</code> has horizontal and vertical scrollbars when it only needs vertical scrolling. The <code>auto</code> example below only adds the scrollbar in the direct we need to scroll.<br>
+ 如果内容适合方框，则使用值auto将显示不带滚动条的内容。如果它不适合，则会添加滚动条。将下一个示例与溢出示例进行比较：当溢出滚动只需要垂直滚动时，您应该看到它有水平滚动条和垂直滚动条。下面的自动示例只在我们需要滚动的直接位置添加滚动条。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/auto.html", '100%', 700)}}</p>
+
+<p>As we have already learned, using any of these values, other than the default of <code>visible,</code> will create a new Block Formatting Context.<br>
+ 如果内容适合方框，则使用值auto将显示不带滚动条的内容。如果它不适合，则会添加滚动条。将下一个示例与溢出示例进行比较：当溢出滚动只需要垂直滚动时，您应该看到它有水平滚动条和垂直滚动条。下面的自动示例只在我们需要滚动的直接位置添加滚动条。</p>
+
+<p>Note: In the <a href="https://www.w3.org/TR/css-overflow-3/">Working Draft of Overflow Level 3</a>, there is an additional value <code>overflow: clip</code>. This will act like <code>overflow: hidden</code> however it does not allow for programmatic scrolling, the box becomes non-scrollable. In addition it does not create a Block Formatting Context.<br>
+ 注意：在溢出级别3的工作草案中，还有一个附加值overflow:clip。这将类似于溢出：隐藏，但不允许编程滚动，框将变为不可滚动。此外，它不会创建块格式上下文。</p>
+
+<p>The overflow property is in reality a shorthand for the <code><a href="/en-US/docs/Web/CSS/overflow-x">overflow-x</a></code> and <code><a href="/en-US/docs/Web/CSS/overflow-y">overflow-y</a></code> properties. If you specify only one value for overflow, this value is used for both axes. However, you can specify both values in which case the first is used for <code>overflow-x</code> and therefore the horizontal direction, and the second for <code>overflow-y</code> and the vertical direction. In the below example, I have only specified <code>overflow-y: scroll</code> so we do not get the unwanted horizontal scrollbar.<br>
+ 实际上，overflow属性是overflow-x和overflow-y属性的简写。如果只为溢出指定一个值，则此值用于两个轴。但是，您可以指定两个值，在这种情况下，第一个值用于overflow-x，因此是水平方向，第二个值用于overflow-y和垂直方向。在下面的示例中，我只指定了overflow-y:scroll，这样我们就不会得到不需要的水平滚动条。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}</p>
+
+<h2 id="Flow_Relative_Properties流相对属性">Flow Relative Properties流相对属性</h2>
+
+<p>In the guide to <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Writing Modes and Flow Layout</a>, we looked at the newer properties of <code>block-size</code> and <code>inline-size</code> which make more sense when working with different writing modes than tying our layout to the physical dimensions of the screen. The Level 3 Overflow Module also includes flow relative properties for overflow - <code><a href="/en-US/docs/Web/CSS/@media/overflow-block">overflow-block</a></code> and <code><a href="/en-US/docs/Web/CSS/@media/overflow-inline">overflow-inline</a></code>. These correspond to <code>overflow-x</code> and <code>overflow-y</code> but the mapping depends on the writing mode of the document.<br>
+ 在编写模式和流布局指南中，我们研究了块大小和内联大小的较新属性，这些属性在使用不同的编写模式时比将布局与屏幕的物理尺寸联系起来更有意义。3级溢出模块还包括溢出-溢出块和溢出内联的流相关属性。这些对应于overflow-x和overflow-y，但映射取决于文档的写入模式。</p>
+
+<p>These properties currently do not have implementations in browsers, so you will need to use the physical properties at the present time and adjust for your writing mode.<br>
+ 这些属性当前在浏览器中没有实现，因此您需要在当前使用物理属性并根据您的写入模式进行调整。</p>
+
+<h2 id="Indicating_Overflow_指示溢出">Indicating Overflow 指示溢出</h2>
+
+<p>In the Level 3 Overflow specification we have some properties which can help improve the way content looks in an overflow situation.<br>
+ 在3级溢出规范中，我们有一些属性可以帮助改进溢出情况下内容的外观。</p>
+
+<h3 id="Inline-Axis_Overflow_内联轴溢出">Inline-Axis Overflow 内联轴溢出</h3>
+
+<p>The <code><a href="/en-US/docs/Web/CSS/text-overflow">text-overflow</a></code> property deals with text overflowing in the inline direction. It takes one of two values <code>clip</code>, in which case content is clipped when it overflows, this is the initial value and therefore the default behaviour. We also have <code>ellipsis</code> which renders an ellipsis, which may be replaced with a better character for the language or writing mode in use.<br>
+ 文本溢出属性处理内联方向的文本溢出。它采用两个值clip中的一个值，在这种情况下，内容在溢出时被剪裁，这是初始值，因此是默认行为。我们还有一个省略号，它呈现了一个省略号，可以用一个更好的字符来替换使用中的语言或书写模式。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/text-overflow.html", '100%', 500)}}</p>
+
+<h3 id="Block-Axis_Overflow_块轴溢出">Block-Axis Overflow 块轴溢出</h3>
+
+<p>There is also a proposal for a <code>block-overflow</code> property, although at the time of writing the name is still up for discussion. This proposal would enable the adding of an ellipsis when text overflows in the block dimension.<br>
+ 还有一个关于块溢出属性的建议，尽管在编写名称时仍有待讨论。此建议将允许在块维度中文本溢出时添加省略号。</p>
+
+<p>This is useful in the situation where you have a listing of articles, for example, and you display the listings in fixed height boxes which only take a limited amount of text. It may not be obvious to the reader that there is more content to click through to when clicking the box or the title. An ellipsis indicates clearly the fact there is more content. The specification would allow a string of content or a regular ellipsis to be inserted.<br>
+ 例如，在有文章列表的情况下，这很有用，并且在固定高度框中显示列表，而固定高度框只接受有限的文本量。对于读者来说，当单击框或标题时，可能不太明显有更多的内容需要单击。省略号清楚地表明有更多的内容。规范允许插入一个内容字符串或常规省略号。</p>
+
+
+
+<h2 id="Summary_总结">Summary 总结</h2>
+
+<p>Whether you are in continuous media on the web or in a Paged Media format such as print or EPUB, understanding how content overflows is useful when dealing with any layout method. By understanding how overflow works in normal flow, you should find it easier to understand the implications of overflow content in layout methods such as grid and flexbox.<br>
+ 无论您是在Web上的连续媒体中，还是在页面媒体格式（如print或epub）中，了解在处理任何布局方法时内容溢出是如何有用的。通过了解正常流中溢出的工作方式，您应该会发现更容易理解布局方法（如网格和FlexBox）中溢出内容的含义。</p>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/CSS_Flow_Layout/")}}</div>
diff --git a/files/zh-cn/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html b/files/zh-cn/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html
new file mode 100644
index 0000000000..75332b20f8
--- /dev/null
+++ b/files/zh-cn/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html
@@ -0,0 +1,118 @@
+---
+title: Flow Layout and Writing Modes 流布局和书写模式
+slug: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes
+translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes
+---
+<p class="summary">The CSS 2.1 specification, which details how normal flow behaves, assumes a horizontal writing mode. <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Layout</a> properties should work in the same way in vertical writing modes. In this guide, we look at how flow layout behaves when used with different document writing modes.<br>
+ CSS 2.1规范详细描述了正常流的行为，它采用了水平写入模式。布局属性在垂直写入模式中的工作方式应该相同。在本指南中，我们将研究流布局在与不同的文档写入模式一起使用时的行为。</p>
+
+<p>This is not a comprehensive guide to the use of writing modes in CSS, the aim here is to document the areas where flow layout interacts with writing modes in possibly unanticipated ways. The <a href="#External_Resources">external resources</a> and <a href="#See_Also">see also</a> sections of this document link to more writing modes resources.<br>
+ 这不是CSS中书写模式使用的全面指南，这里的目的是以可能未预料到的方式记录流布局与书写模式交互的区域。外部资源，请参阅本文档的章节，链接到更多写作模式资源。</p>
+
+
+
+<h2 id="The_Writing_Modes_Specification_书写模式规范">The Writing Modes Specification<br>
+ 书写模式规范</h2>
+
+<p>The CSS Writing Modes Level 3 Specification defines the impact a change the document writing mode has on flow layout. In the writing modes introduction, <a href="https://drafts.csswg.org/css-writing-modes-3/#text-flow">the specification says</a>,<br>
+ CSS编写模式级别3规范定义了文档编写模式更改对流布局的影响。在书写模式介绍中，规范说：</p>
+
+<blockquote>
+<p>“A writing mode in CSS is determined by the {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} properties. It is defined primarily in terms of its inline base direction and block flow direction.”<br>
+ “CSS中的书写模式由书写模式、方向和文本方向属性决定。它主要是根据其内联基础方向和块流方向来定义的。”</p>
+</blockquote>
+
+<p>The specification defines the <em>inline base direction</em> as the direction in which content is ordered on a line. This defines the start and end of the inline direction. The start is where sentences start and the end is where a line of text ends before it would begin to wrap onto a new line.<br>
+ 规范将内联基方向定义为内容在行上的排序方向。这定义了内联方向的开始和结束。开始是句子开始的地方，结束是一行文本在开始换行之前结束的地方。</p>
+
+<p>The <em>block flow direction</em> is the direction in which boxes, for example paragraphs, stack in that writing mode. The CSS writing-mode property controls the block flow direction. If you want to change your page, or part of your page, to <code>vertical-lr</code> then you can set <code>writing-mode: vertical-lr</code> on the element and this will change the direction of the blocks and therefore the inline direction as well.<br>
+ 块流方向是框（例如段落）以该写入模式堆叠的方向。CSS写入模式属性控制块流方向。如果要将页面或页面的一部分更改为垂直lr，则可以在元素上设置书写模式：垂直lr，这将更改块的方向，因此也会更改内联方向。</p>
+
+
+
+<p>While certain languages will use a particular writing mode or text direction, we can also use these properties for creative effect, such as running a heading vertically.<br>
+ 虽然某些语言将使用特定的书写模式或文本方向，但我们也可以使用这些属性来产生创造性效果，例如垂直运行标题。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/creative-use.html", '100%', 720)}}</p>
+
+<h2 id="The_writing-mode_property_and_block_flow_写入模式属性和块流">The <code>writing-mode</code> property and block flow<br>
+ 写入模式属性和块流</h2>
+
+<p>The {{cssxref("writing-mode")}} property accepts the values <code>horizontal-tb</code>, <code>vertical-rl</code> and <code>vertical-lr</code>. These values control the direction that blocks flow on the page. The initial value is <code>horizontal-tb,</code> which is a top to bottom block flow direction with a horizontal inline direction. Left to right languages, such as English, and Right to left languages. such as Arabic, are all <code>horizontal-tb</code>.<br>
+ 写入模式属性接受值水平tb、垂直rl和垂直lr。这些值控制阻止页面流动的方向。初始值是水平tb，这是一个顶部到底部的块流方向，具有水平的内联方向。从左到右的语言，如英语和从右到左的语言。如阿拉伯语，都是水平结核。</p>
+
+
+
+<p>The following example shows blocks using <code>horizontal-tb</code>.<br>
+ 下面的示例显示了使用水平TB的块。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/horizontal-tb.html", '100%', 720)}}</p>
+
+<p>The value <code>vertical-rl</code> gives you a right-to-left block flow direction with a vertical inline direction, as shown in the next example.<br>
+ 值vertical rl为您提供了一个从右到左的块流方向和一个垂直的内联方向，如下一个示例所示。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-rl.html", '100%', 720)}}</p>
+
+<p>The final example demonstrates the third possible value for <code>writing-mode</code> — <code>vertical-lr</code>. This gives you a left-to-right block flow direction and a vertical inline direction.<br>
+ 最后一个示例演示了第三个可能的写入模式值-垂直lr。这将为您提供一个从左到右的块流方向和一个垂直的内联方向。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-lr.html", '100%', 720)}}</p>
+
+<h2 id="Boxes_with_a_different_writing_mode_to_their_parent_对父级具有不同写入模式的框">Boxes with a different writing mode to their parent<br>
+ 对父级具有不同写入模式的框</h2>
+
+<p>When a nested box is assigned a different writing mode to its parent, then an inline level box will display as if it has <code>display: inline-block</code>.<br>
+ 当一个嵌套框被分配给它的父级的不同的写入模式时，一个内联级别的框将显示，就好像它有display:inline块一样。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-change-mode.html", '100%', 720)}}</p>
+
+<p>A block-level box will establish a new block formatting context, meaning that if its inner display type would be <code>flow</code>, it will get a computed display type of <code>flow-root</code>. This is shown in the next example where the box which displays as <code>horizontal-tb</code> contains a float which is contained due to its parent establishing a new BFC.<br>
+ 块级别的框将建立一个新的块格式上下文，这意味着如果其内部显示类型为“流”，则它将获得“流根”的计算显示类型。这在下一个示例中显示，其中显示为水平tb的框包含一个浮动，该浮动是由于其父级建立了一个新的bfc而包含的。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/block-change-mode.html", '100%', 720)}}</p>
+
+<h2 id="Replaced_elements_更换的元件">Replaced elements 更换的元件</h2>
+
+<p>Replaced elements such as images will not change their orientation based on the <code>writing-mode</code> property. However, replaced elements such as form controls which include text, should match the writing mode in use.<br>
+ 替换的元素（如图像）不会根据“写入模式”属性更改其方向。但是，替换的元素（如包含文本的表单控件）应与使用中的写入模式匹配。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/replaced.html", '100%', 720)}}</p>
+
+<h2 id="Logical_Properties_and_Values_逻辑属性和值">Logical Properties and Values<br>
+ 逻辑属性和值</h2>
+
+<p>Once you are working in writing modes other than <code>horizontal-tb</code> many of the properties and values that are mapped to the physical dimensions of the screen seem strange. For example, if you give a box a width of 100px, in <code>horizontal-tb</code> that would control the size in the inline direction. In <code>vertical-lr</code> it controls the size in the block direction because it does not rotate with the text.<br>
+ 一旦您在编写模式（而不是水平tb）时，许多映射到屏幕物理维度的属性和值看起来很奇怪。例如，如果为一个框提供100px的宽度，以水平tb表示，它将控制内联方向的大小。在垂直lr中，它控制块方向的大小，因为它不随文本旋转。</p>
+
+
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/width.html", '100%', 720)}}</p>
+
+<p>Therefore, we have new properties of {{cssxref("block-size")}} and {{cssxref("inline-size")}}. If we give our block an <code>inline-size</code> of 100px, it doesn’t matter whether we are in a horizontal or a vertical writing mode, <code>inline-size</code> will always mean the size in the inline direction.<br>
+ 因此，我们有了块大小和内联大小的新属性。如果我们给块一个100px的内联大小，不管我们是处于水平还是垂直写入模式，内联大小总是指内联方向的大小。</p>
+
+
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-size.html", '100%', 720)}}</p>
+
+<p>The <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">CSS Logical Properties and Values</a> specification includes logical versions of the properties that control margins, padding and borders as well as other mappings for things that we have typically used physical directions to specify.<br>
+ CSS逻辑属性和值规范包括用于控制页边距、填充和边框的属性的逻辑版本，以及用于我们通常使用物理方向指定的内容的其他映射。</p>
+
+<h2 id="Summary_总结">Summary 总结</h2>
+
+<p>In most cases, flow layout works as you would expect it to when changing the writing mode of the document or parts of the document. This can be used to properly typeset vertical languages or for creative reasons. CSS is making this easier by way of introducing logical properties and values so that when working in a vertical writing mode sizing can be based on element's inline and block size. This will be useful when creating components which can work in different writing-modes.<br>
+ 在大多数情况下，流程布局的工作方式与您在更改文档或文档部分的写入模式时所期望的一样。这可以用于正确排版垂直语言或出于创造性的原因。CSS通过引入逻辑属性和值使这变得更容易，这样在垂直写入模式下工作时，大小调整可以基于元素的内联和块大小。这在创建可以在不同写入模式下工作的组件时很有用。</p>
+
+<h2 id="See_Also_另请参见">See Also 另请参见</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Writing_Modes">Writing Modes</a></li>
+</ul>
+
+<h2 id="External_Resources_外部资源">External Resources 外部资源</h2>
+
+<ul>
+ <li><em><a href="https://24ways.org/2016/css-writing-modes/">CSS Writing Modes</a></em>, Jen Simmons on 24 Ways</li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/CSS_Flow_Layout/")}}</div>
diff --git a/files/zh-cn/web/css/css_flow_layout/index.html b/files/zh-cn/web/css/css_flow_layout/index.html
new file mode 100644
index 0000000000..e6736b7023
--- /dev/null
+++ b/files/zh-cn/web/css/css_flow_layout/index.html
@@ -0,0 +1,45 @@
+---
+title: CSS 流式布局
+slug: Web/CSS/CSS_Flow_Layout
+translation_of: Web/CSS/CSS_Flow_Layout
+---
+<div>{{CSSRef}}</div>
+
+<div>"文档流"或"流式布局"是在对布局进行任何更改之前，在页面上显示"块"和"内联"元素的方式。 这个"流"本质上是一系列的事物，它们都在你的布局中一起工作，并且互相了解。 一旦某部分脱离了"流"，它就会独立地工作。</div>
+
+<div> </div>
+
+<div>在文档流中，内联元素按内联方向显示，即词语在依据文件写作模式的句子中表示的方向。块元素则一个接一个地显示，就像该文档的写作模式中的段落一样。 因此在英语中，内联元素从左边开始一个接一个地显示，块元素从顶部开始向下显示并移动页面。</div>
+
+<h2 id="示例">示例</h2>
+
+<p>下面的示例演示块和内联级别框。两个带有绿色边框的段落元素是"块"级，其中一个在另一个下面显示。</p>
+
+<p>第一个句子还包括一个带有蓝色背景的 span 元素。 这是行内级别，因此显示在句子的适当位置。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout in Normal Flow</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">In Flow and Out of Flow</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Flow Layout and Writing Modes</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">Flow Layout and Overflow</a></li>
+</ul>
+
+<h2 id="参考">参考</h2>
+
+<h3 id="Glossary_Entries">Glossary Entries</h3>
+
+<ul>
+ <li>{{Glossary("Block/CSS", "Block (CSS)")}}</li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+</ol>
+</section>
diff --git a/files/zh-cn/web/css/css_flow_layout/intro_to_formatting_contexts/index.html b/files/zh-cn/web/css/css_flow_layout/intro_to_formatting_contexts/index.html
new file mode 100644
index 0000000000..8b9acd760f
--- /dev/null
+++ b/files/zh-cn/web/css/css_flow_layout/intro_to_formatting_contexts/index.html
@@ -0,0 +1,90 @@
+---
+title: Introduction to formatting contexts 格式化上下文简介
+slug: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts
+tags:
+  - BFC
+  - 格式化上下文
+translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts
+---
+<div>{{CSSRef}}<br>
+本文介绍格式化上下文的概念，其中有几种类型，包括块格式化上下文 block formatting contexts、内联格式化上下文 inline formatting contexts和灵活格式化上下文 flex formatting contexts。还介绍了它们的基本行为以及如何利用这些行为。</div>
+
+<div><br>
+页面上的所有内容都是<strong>格式化上下文 formatting context </strong>的一部分，或者是一个以特定方式显示的区域。<strong>块格式上下文（BFC）</strong>将根据块布局规则布局子元素，<strong>灵活格式上下文 flex formatting context </strong>将其子元素布局为灵活项{{Glossary("flex item", "flex items")}}等。每个格式上下文在其上下文中都有特定的布局规则。</div>
+
+<h2 id="Block_formatting_contexts_块格式化上下文">Block formatting contexts 块格式化上下文</h2>
+
+<p>文档最外层元素使用块布局规则或称为<strong>初始块格式上下文</strong>。这意味着<code>&lt;html&gt;</code>元素块中的每个元素都是按照正常流程遵循块和内联布局规则进行布局的。参与 <abbr title="Block Formatting Context">BFC</abbr> 的元素使用CSS框模型概述的规则，该模型定义了元素的边距、边框和填充如何与同一上下文中的其他块交互。</p>
+
+<h3 id="创建新的块格式上下文">创建新的块格式上下文</h3>
+
+<p>{{HTMLElement("html")}} 元素不是唯一能够创建块格式上下文的元素。默认为块布局的任何元素也会为其后代元素创建块格式上下文。此外，还有一些CSS属性可以使元素创建一个BFC，即使默认情况下它不这样做。</p>
+
+<p>除了文档的根元素({{HTMLElement("html")}}) 之外，还将在以下情况下创建一个新的BFC：</p>
+
+<ul>
+ <li>使用{{cssxref("float")}} 时其浮动的元素</li>
+ <li>绝对定位的元素 (包含 {{cssxref("position", "position: fixed", "#fixed")}} 或{{cssxref("position", "position: sticky", "#sticky")}}</li>
+ <li>使用以下属性的元素 {{cssxref("display", "display: inline-block", "#inline-block")}}</li>
+ <li>表格单元格或使用 <code>display: table-cell</code>, 包括使用 <code>display: table-*</code> 属性的所有表格单元格</li>
+ <li>表格标题或使用 <code>display: table-caption</code> 的元素</li>
+ <li>块级元素的 overflow 属性不为 <code>visible</code></li>
+ <li>元素属性为 <code>display: flow-root</code> 或 <code>display: flow-root list-item </code></li>
+ <li>元素属性为 {{cssxref("contain", "contain: layout", "#layout")}}, <code>content</code>, 或 <code>strict</code></li>
+ <li>{{Glossary("flex item", "flex items")}}</li>
+ <li>网格布局元素</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">multicol containers</a></li>
+ <li>元素属性 {{cssxref("column-span")}} 设置为 <code>all</code></li>
+</ul>
+
+<p>这很有用，因为新的BFC的行为与最外层的文档非常相似，它在主布局中创造了一个小布局。BFC包含其内部的所有内容，{{cssxref("float")}} 和 {{cssxref("clear")}} 仅适用于同一格式上下文中的项目，而页边距仅在同一格式上下文中的元素之间折叠。</p>
+
+<h3 id="BFC_创建例子">BFC 创建例子</h3>
+
+<p>让我们看看几个例子，来理解创建 <abbr title="Block Formatting Context">BFC</abbr> 的效果。</p>
+
+<p>在下面的示例中，我们在应用了边框的 <code>&lt;div&gt;</code> 中有一个浮动元素。该 <code>div</code> 的内容与浮动元素一起浮动。由于float的内容比它旁边的内容高，所以现在DIV的边框贯穿了float。如流入和流出元素指南<a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">guide to in-flow and out of flow elements</a>中所述，浮动已脱离文档流，因此DIV的背景和边框仅包含内容，而不包含浮动。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}</p>
+
+<p>创建一个新的BFC将包含该浮动。在过去，一种典型的方法是设置 <code>overflow: auto</code> 或设置其他不是 <code>overflow: visible</code> 的值。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}<br>
+ 设置 <code>overflow: auto</code> 会自动创建包含浮动的新 <abbr title="Block Formatting Context">BFC</abbr>。现在，我们的DIV在布局中变成了一个迷你布局。任何子元素都将包含在其中。</p>
+
+<p>使用 <code>overflow</code> 创建新的 <abbr title="Block Formatting Context">BFC</abbr> 的问题在于， <code>overflow</code> 属性用于告诉浏览器您希望如何处理溢出的内容。在某些情况下，当您纯粹使用此属性创建BFC时，您会发现不需要的滚动条或剪切阴影。另外，对于未来的开发人员来说，它可能不太可读，因为不能显式地表明为什么要使用溢出来实现这一目的。如果您使用了这个方法，最好对代码进行注释以便他人理解。</p>
+
+<h3 id="使用displayflow-root显式创建BFC">使用display:flow-root显式创建BFC</h3>
+
+<p><br>
+ 使用 <code>display: flow-root</code> （或 <code>display: flow-root list-item</code>）将创建一个新的BFC，而不会产生任何其他潜在的问题副作用。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}</p>
+
+<p>使用 {{HTMLElement("div")}}上的 <code>display: flow-root</code> ，该容器内的所有内容都参与该容器的块格式上下文，并且浮动不会从元素底部弹出。</p>
+
+<p><code>flow-root</code> 关键字的意义是，创建的内容本质上类似于一个新的根元素（如 {{HTMLElement("html")}}所做），并确定这个新的上下文如何创建及其流布局如何实现。</p>
+
+<h2 id="行内格式化上下文">行内格式化上下文</h2>
+
+<p>内联格式上下文存在于其他格式上下文中，可以将其视为段落的上下文。段落创建了一个内联格式上下文，其中在文本中使用诸如 {{HTMLElement("strong")}}、{{HTMLElement("a")}}或 {{HTMLElement("span")}} 元素等内容。</p>
+
+<p>box model 不完全适用于参与内联格式上下文。在水平书写模式行中，水平填充、边框和边距将应用于元素，并左右移动文本。但是，元素上方和下方边距将不适用。应用垂直填充和边框可能会在内容的上方和下方重叠，因为在内联格式上下文中，填充和边框不会将行框撑开。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}</p>
+
+<h2 id="其他格式上下文">其他格式上下文</h2>
+
+<p>本指南涵盖了流式布局，因此不涉及其他可能的格式上下文。因此，了解创建任何类型的格式上下文都将改变该格式上下文中元素的行为方式是很有用的。这种行为总是在规范中描述的，在MDN中也有描述。</p>
+
+<h2 id="总结">总结</h2>
+
+<p>在本指南中，我们更详细地介绍了块和内联格式上下文以及创建块格式上下文（<abbr title="Block Formatting Context">BFC</abbr>）的重要主题。在下一个指南中，我们将了解正常流如何与不同的写入模式交互 <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">how normal flow interacts with different writing modes</a>。</p>
+
+<h2 id="另请参见">另请参见</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">Block formatting context</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Visual_formatting_model">Visual Formatting Model</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model">CSS Box Model</a></li>
+</ul>
diff --git a/files/zh-cn/web/css/css_flow_layout/在flow中和flow之外/index.html b/files/zh-cn/web/css/css_flow_layout/在flow中和flow之外/index.html
new file mode 100644
index 0000000000..2c84dc8384
--- /dev/null
+++ b/files/zh-cn/web/css/css_flow_layout/在flow中和flow之外/index.html
@@ -0,0 +1,64 @@
+---
+title: In Flow and Out of Flow
+slug: Web/CSS/CSS_Flow_Layout/在Flow中和Flow之外
+translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">在之前的 <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">文档</a>中我解释了常规流中块（block）和行（inline）布局，常规流中的所有元素都会以这种布局方式运作。</p>
+
+<p class="summary">在下面的例子中，我新建了一个标题（h1元素），一个段落（p元素），一个无序列表（ul元素）和一个包含strong元素的段落（p元素），标题和段落都是块级（block level），strong元素为行级（inline）。列表中的项通过弹性盒布局排成一行，但是列表本身仍然处于块和内联布局中 - 他的display属性为block。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/in-flow.html", '100%', 800)}}</p>
+
+<p>可以说，示例中的所有元素都属于常规流，按照源代码中的顺序渲染到页面中。</p>
+
+<h2 id="脱离常规流的元素">脱离常规流的元素</h2>
+
+<p>下列元素会脱离常规流:</p>
+
+<ul>
+ <li>floated items。浮动的元素</li>
+ <li>items with <code>position: absolute</code> (including <code>position: fixed</code> which acts in the same way)。通过设置position属性为absolute或者fixed的元素</li>
+ <li>the root element (<code>html</code>)根元素</li>
+</ul>
+
+<p>脱离常规流的元素会创建一个新的块级格式化上下文（Block Formatting Context: BFC）环境，其中包含的所有元素构成了一个小的布局环境，与页面中的其他内容分隔开来。而根元素，作为页面中所有内容的容器，自身脱离常规流，为整个文档创建了一个块级格式化上下文环境。</p>
+
+<h3 id="Floated_Items">Floated Items</h3>
+
+<p>在这个例子中，我有一个div，以及两个段落。我已经为段落添加了背景颜色，然后将div向左浮动。 div现在已经不再处于flow中了。</p>
+
+<p>作为一个浮动的元素，它首先根据正常flow布局，然后从流动中取出并尽可能地向左移动</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/float.html", '100%', 800)}}</p>
+
+<p>你可以看到下面段落的背景颜色在下面运行，只是该段落的行框已被缩短以导致在浮动周围包裹内容的效果。我们段落的方框仍然按照正常流程规则显示。这就是为什么要在浮动项目周围留出空间，必须为项目添加边距，以便将线框推离它。您无法对以下内插内容应用任何内容来实现此目的。</p>
+
+<h3 id="Absolute_Positioning">Absolute Positioning</h3>
+
+<p>设置元素属性为 <code>position: absolute</code> 或者 <code>position: fixed</code> 会使此元素脱离文档流, 他本来占据的空间也会被移除. 在下面的例子中，我定义了三个p元素，并且将第二个p元素设置为 <code>position</code> <code>absolute</code>,  <code>top: 30px</code> , <code>right: 30px</code>. 使其脱离文档流。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/abspos.html", '100%', 700)}}</p>
+
+<p>设置 <code>position: fixed</code> 也能使元素脱离文档流, 但是偏移量会根据视口而不是父元素来定。</p>
+
+<p>当通过定位方式使元素脱离文档流，元素内容可能重叠，这需要你自己去处理。脱离文档流意味着页面中的其他元素不知道该元素的存在，故不会对该元素做出响应。</p>
+
+<h3 id="Relative_Positioning_and_Flow">Relative Positioning and Flow</h3>
+
+<p>如果你给一个元素开启相对定位，那该元素依然会位于文档流中，然而你可以通过设置偏移值的方式来移动他。正如下面的例子所展示的，该元素的原先占据的空间仍然会被保留。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/relative.html", '100%', 800)}}</p>
+
+<p>当你移动一个元素或者使元素脱离文档流，为防止重叠，你可能需要对元素内容和元素周围的内容做一些管理，要么清除浮动， 要么保证相对定位不会覆盖其他元素。</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>In this guide we have covered the ways to take an element out of flow in order to achieve some very specific types of positioning. In the next guide we will look at a related issue, that of creating a <a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">Block Formatting Context</a>, in <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a>.</p>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li>Learn Layout: <em><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></em></li>
+</ul>