这篇翻译不完整。请帮忙从英语翻译这篇文章

在之前的 previous guide 中我解释了在flow中包含block和inline布局,所有的元素在flow中的元素都会以这种方式运作。

在下面包含有导航,段落、列表和包含有strong标签的一点文字中,heading和paragraphs都是block level的,strong标签是inline的,list使用flexbox来把列表的每一项都排列在一个row里。另外,容器的display被设置成block,它本身也参与了block和inline的布局。

那些在source中并顺序的出现的page当中的所有元素,都可以被理解成在flow中。

Taking an item out of flow

所有的元素都在flow当中,除了一下几项:

  • floated items。浮动的元素
  • items with position: absolute (including position: fixed which acts in the same way)。通过设置position属性为absolute或者fixed的元素
  • the root element (html)根元素

所有不在flow当中的item都会创建一个BFC,因此这些item中可以被当做一个mini的不受页面其他部分影响的布局,因此,作为文档中所有内容的容器,根元素不在流中,它为文档建立了块格式化上下文。

Floated Items

在这个例子中,我有一个div,以及两个段落。我已经为段落添加了背景颜色,然后将div向左浮动。 div现在已经不再处于flow中了。

作为一个浮动的元素,它首先根据正常flow的布局,然后从流动中取出并尽可能地向左移动

你可以看到下面段落的背景颜色在下面运行,只是该段落的行框已被缩短以导致在浮动周围包裹内容的效果。我们段落的方框仍然按照正常流程规则显示。这就是为什么要在浮动项目周围留出空间,必须为项目添加边距,以便将线框推离它。您无法对以下内插内容应用任何内容来实现此目的。

Absolute Positioning

Giving an item position: absolute or position: fixed removes it from flow, and any space that it would have taken up is removed. In the next example I have three paragraph elements, the second element has position absolute, with offset values of top: 30px and right: 30px. It has been removed from document flow.

Using position: fixed also removes the item from flow, however the offsets are based on the viewport rather than the containing block.

When taking an item out of flow with positioning, you will need to manage the possibility of content overlapping. Out of flow essentially means that the other elements on your page no longer know that element exists so will not respond to it.

Relative Positioning and Flow

If you give an item relative positioning with position: relative it remains in flow, however you are then able to use the offset values to push it around. The space that it would have been placed in normal flow is reserved however, as you can see in the example below.

When you do anything to remove, or shift an item from where it would be placed in normal flow, you can expect to need to do some managing of the content and the content around it to prevent overlaps. Whether that involves clearing floats, or ensuring that an element with position: absolute does not sit on top of some other content. For this reason methods which remove elements from being in-flow should be used with understanding of the effect that they have.

Summary

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 Block Formatting Context, in Formatting Contexts Explained.

See Also

文档标签和贡献者

此页面的贡献者: mdnwebdocs-bot, feaswcy
最后编辑者: mdnwebdocs-bot,