1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
---
title: Поточная раскладка CSS
slug: Web/CSS/CSS_Flow_Layout
tags:
- CSS
- Раскладка
- Руководство
- поток
- поточная раскладка
translation_of: Web/CSS/CSS_Flow_Layout
---
<div>{{CSSRef}}</div>
<p class="summary"><em>Нормальный поток (normal flow) </em>или поточная раскладка (flow layout), это способ отображения блочных (block) и строчных (inline) элементов на странице. Сначала раскладка этих элементов происходит согласно правилам потока, после чего в неё могут быть внесены изменения, например, относительное позиционирование.</p>
<p class="summary">По сути поток представляется собой набор сущностей, которые работают вместе и знают друг о друге. Когда некоторая сущность <em>вынимается из потока (out of flow)</em>, то она работает независимо.</p>
<p class="summary">В нормальном потоке <strong>строчные (inline)</strong> элементы отображаются в направлении строки (inline direction), то есть в том же направлении, как идут слова в предложении в соответствии с режимом письма (<a href="/en-US/docs/Web/CSS/CSS_Writing_Modes">writing mode</a>) документа. <strong>Блочные (block)</strong> элементы отображаются один за другим, также как параграфы в соответствии с режимом письма документа. Поэтому в английском языке строчные элементы отображаются один за другим, начиная слева, а блочные элементы выкладываются на странице сверху вниз.</p>
<h2 id="Пример">Пример</h2>
<p>Следующий пример показывает боксы уровня блока (block level) и уровня строки (inline level). Боксы уровня блока участвуют в блочном контексте форматирования, а боксы уровня строки в строчном контексте форматирования.</p>
<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="Записи_глоссария">Записи глоссария</h3>
<ul>
<li>{{Glossary("Block/CSS", "Block (CSS)")}}</li>
</ul>
<section 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>
|
