initial commit

3 files changed, 261 insertions, 0 deletions

diff --git a/files/ru/web/css/css_flow_layout/index.html b/files/ru/web/css/css_flow_layout/index.html
new file mode 100644
index 0000000000..99afb866d3
--- /dev/null
+++ b/files/ru/web/css/css_flow_layout/index.html
@@ -0,0 +1,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 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/ru/web/css/css_flow_layout/блочное_и_строчное_размещение_в_нормальном_потоке/index.html b/files/ru/web/css/css_flow_layout/блочное_и_строчное_размещение_в_нормальном_потоке/index.html
new file mode 100644
index 0000000000..86879d343e
--- /dev/null
+++ b/files/ru/web/css/css_flow_layout/блочное_и_строчное_размещение_в_нормальном_потоке/index.html
@@ -0,0 +1,123 @@
+---
+title: Блочное и строчное расположение в нормальном потоке
+slug: Web/CSS/CSS_Flow_Layout/Блочное_и_строчное_размещение_в_нормальном_потоке
+tags:
+  - CSS
+  - Макет
+  - Макет потока CSS
+  - Отступы
+  - Руководство
+  - Средний уровень
+  - поток
+translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">В этом руководстве мы исследуем основы поведения блочных и строчных элементов - участников нормального потока.</p>
+
+<p>Normal Flow is defined in the <a href="https://www.w3.org/TR/CSS2/visuren.html#normal-flow">CSS 2.1 specification</a>, which explains that any boxes in normal flow will be part of a <em>formatting context</em>. They can be either block or inline, but not both at once. We describe block-level boxes as participating in a <em>block formatting context</em>, and inline-level boxes as participating in an <em>inline formatting context</em>.</p>
+
+<p>The behaviour of elements which have a block or inline formatting context is also defined in this specification. For elements with a block formatting context, the spec says:</p>
+
+<blockquote>
+<p>“In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.<br>
+ <br>
+ In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).” - 9.4.1</p>
+</blockquote>
+
+<p>For elements with an inline formatting context:</p>
+
+<blockquote>
+<p>“In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.” - 9.4.2</p>
+</blockquote>
+
+<p>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. The behavior on block and inline elements is the same when working in a vertical writing mode, and we will explore this in a future guide on Flow Layout and Writing Modes.</p>
+
+<h2 id="Elements_participating_in_a_block_formatting_context">Elements participating in a block formatting context</h2>
+
+<p>Block elements in a horizontal writing mode such as English, layout vertically, one below the other.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16125/mdn-horizontal.png" style="height: 382px; width: 521px;"></p>
+
+<p>In a vertical writing mode then would lay out horizontally.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16126/mdn-vertical.png" style="height: 382px; width: 418px;"></p>
+
+<p>In this guide, we will be working in English and therefore a horizontal writing mode. However, everything described should work in the same way if your document is in a vertical writing mode.</p>
+
+<p>As defined in the specification, the margins between two block boxes are what creates separation between the elements. We see this with a very simple layout of two paragraphs, to which I have added a border. The default browser stylesheet adds spacing between the paragraphs by way of adding a margin to the top and bottom.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}</p>
+
+<p>If we set margins on the paragraph element to <code>0</code> then the borders will touch.</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. If we give them a width, they will continue to lay out one below the other - even if there would be space for them to be side by side. Each will start against the start edge of the containing block, so the place at which sentences would begin in that writing mode.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}</p>
+
+<h3 id="Margin_collapsing">Margin collapsing</h3>
+
+<p>The spec explains that margins between block elements <em>collapse</em>. This means that if you have an element with a top margin immediately after an element with a bottom margin, rather than the total space being the sum of these two margins, the margin collapses, and so will essentially become as large as the larger of the two margins.</p>
+
+<p>In the example below, the paragraphs have a top margin of <code>20px</code> and a bottom margin of <code>40px</code>. The size of the margin between the paragraphs is <code>40px</code> as the smaller top margin on the second paragraph has collapsed with the larger bottom margin of the first.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}</p>
+
+<p>You can read more about margin collapsing in our article <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering Margin Collapsing</a>.</p>
+
+<div class="note">
+<p>Note: if you are not sure whether margins are collapsing, check the Box Model values in your browser DevTools. This will give you the actual size of the margin which can help you to identify what is happening.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16124/box-model.png" style="height: 848px; width: 828px;"></p>
+</div>
+
+<h2 id="Elements_participating_in_an_inline_formatting_context">Elements participating in an inline formatting context</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.</p>
+
+<p>In the following example, we have three inline boxes created by a paragraph with a {{HTMLElement("strong")}} element inside it.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}</p>
+
+<p>The boxes around the words before the <code>&lt;strong&gt;</code> element and after the <code>&lt;strong&gt;</code> 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.</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 <code>&lt;strong&gt;</code> element 300%; that content now defines the height of the line box on that line.</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>.</p>
+
+<h2 id="The_display_property_and_flow_layout">The display property and flow layout</h2>
+
+<p>In addition to the rules existing in CSS2.1, new levels of CSS further describe the behaviour of block and inline boxes. The {{cssxref("display")}} property defines how a box and any boxes inside it behave. In the CSS Display Model Level 3, we can learn more about how the <code>display</code> property changes the behaviour of boxes and the boxes they generate.</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 {{HTMLElement("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>.</p>
+
+<p>The flex items however are participating in a flex formatting context, because their parent is the element with <code>display: flex</code>, which has an inner display type of <code>flex</code>, establishing the flex formatting context for the direct children.</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.</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>.</p>
+
+<h3 id="Changing_the_Formatting_Context_an_element_participates_in">Changing the Formatting Context an element participates in</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 {{HTMLElement("strong")}} element is used to highlight a word and displays bold in browsers. It would not generally make sense for that <code>&lt;strong&gt;</code> element to be displayed as a block level element, breaking onto a new line. If you did want all <code>&lt;strong&gt;</code> elements to display as block elements, you could do so by setting <code>display: block</code> on <code>&lt;strong&gt;</code>. This means that you can always use most of the semantic HTML elements to markup your content, and then change the way it displays using 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.</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/ru/web/css/css_flow_layout/введение_в_контексты_форматирования/index.html b/files/ru/web/css/css_flow_layout/введение_в_контексты_форматирования/index.html
new file mode 100644
index 0000000000..c027e8eb3b
--- /dev/null
+++ b/files/ru/web/css/css_flow_layout/введение_в_контексты_форматирования/index.html
@@ -0,0 +1,85 @@
+---
+title: Введение в контексты форматирования
+slug: Web/CSS/CSS_Flow_Layout/Введение_в_контексты_форматирования
+translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary">В этой статье представлена концепция контекстов форматирования (formatting context). Существует несколько типов контекстов форматирования, например, блочный контекст форматирования (block formatting context, BFC), строчный контекст форматирования (inline formatting context), флексовый контекст форматирования (flex formatting context). В статье даны основы того, как они себя ведут, и как вы можете использовать это поведение.</span></p>
+
+<p>Всё на странице является частью <strong>контекста форматирования</strong> (formatting context), который представляет собой область, в которой происходит раскладка контента по определенным правилам. <strong>Блочный контекст форматирования</strong> (block formatting context, BFC) делает раскладку своих дочерних элементов в соответствии с правилами блочной раскладки, <strong>флексовый контекст форматирования</strong> (flex formatting context) раскладывает свои дочерние элементы как {{Glossary("flex item", "флекс-элементы")}} и т.д. Каждый контекст форматирования использует свои правила раскладки.</p>
+
+<h2 id="Блочные_контексты_форматирования">Блочные контексты форматирования</h2>
+
+<p>Самый внешний элемент в документе, который использует правила блочной раскладки, устанавливает первый или <strong>начальный блочный контекст форматирования</strong> (initial block formatting context). Это означает, что все элементы внутри элемента <code>&lt;html&gt;</code> раскладываются в соответствии с нормальным потоком, следуя правилам блочной и строчной раскладки. Элементы, участвующие в <abbr title="Блочный контекст форматирования">БКФ</abbr>, используют правила, описанные в модели бокса (CSS Box Model), которая определяет, как поля (margins), границы (borders) и отступы (paddings) элемента взаимодействуют с другими блоками в том же контексте.</p>
+
+<h3 id="Создание_нового_блочного_контекста_форматирования">Создание нового блочного контекста форматирования</h3>
+
+<p>Элемент {{HTMLElement("html")}} не единственный, кто может создавать блочный контекст форматирования. Любой элемент, который по умолчанию представляет собой блок, также создает блочный контекст форматирования для своих потомков. Кроме того, существуют свойства CSS, которые могут заставить элемент создавать БКФ, даже если он не делает этого по умолчанию. Это может быть полезным поскольку новый БКФ будет вести себя во многом как внешний документа, в том смысле, что он создает новую мини-раскладку в основной раскладке. БКФ содержит все внутри себя, {{cssxref("float")}} and {{cssxref("clear")}} применяются только к элементам, которые находится в том же контексте форматирования, также как и поля (margings) схлопываются только между элементами одного и того же контекста форматирования.</p>
+
+<p>Кроме корневого элемента ({{HTMLElement("html")}}) новый БКФ создается в следующих случаях:</p>
+
+<ul>
+ <li>плавающие элементы ({{cssxref("float", "float: left", "#left")}} или {{cssxref("float", "float: right", "#right")}});</li>
+ <li>абсолютно позиционированные элементы ({{cssxref("position", "position: absolute", "#absolute")}}, {{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", "флекс-элементы")}};</li>
+ <li>грид-элементы;</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">контейнеры мультиколонок</a>;</li>
+ <li>элементы с {{cssxref("column-span")}} в значении <code>all</code>.</li>
+</ul>
+
+
+
+<p>Let's have a look at a couple of these in order to see the effect creating a new <abbr title="Block Formatting Context">BFC</abbr>.</p>
+
+<p>In the example below, we have a floated element inside a <code>&lt;div&gt;</code> with a border applied. The content of that <code>div</code> has floated alongside the floated element. As the content of the float is taller than the content alongside it, the border of the div now runs through the float. As explained in the <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>, the float has been taken out of flow so the background and border of the div only contain the content and not the float.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}</p>
+
+<p>Creating a new <abbr title="Block Formatting Context">BFC</abbr> would contain the float. A typical way to do this in the past has been to set <code>overflow: auto</code> or set other values than the initial value of <code>overflow: visible</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}</p>
+
+<p>Setting  <code>overflow: auto</code> created a new <abbr title="Block Formatting Context">BFC</abbr> containing the float. Our <code>div</code> now becomes a mini-layout inside our layout. Any child element will be contained inside it.</p>
+
+<p>The problem with using <code>overflow</code> to create a new <abbr title="Block Formatting Context">BFC</abbr> is that the <code>overflow</code> property is meant for telling the browser how you wish to deal with overflowing content. There are some occasions in which you will find you get unwanted scrollbars or clipped shadows when you use this property purely to create a BFC. In addition, it is potentially not very readable for a future developer, as it may not be obvious why you used overflow for this purpose. If you do this, it would be a good idea to comment the code to explain.</p>
+
+<h3 id="Explicitly_creating_a_BFC_using_display_flow-root">Explicitly creating a BFC using display: flow-root</h3>
+
+<p>Using <code>display: flow-root</code> (or <code>display: flow-root list-item)</code> on the containing block will create a new <abbr title="Block Formatting Context">BFC</abbr> without any other potentially problematic side-effects.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}</p>
+
+<p>With <code>display: flow-root</code> on the {{HTMLElement("div")}}, everything inside that container participates in the block formatting context of that container, and floats will not poke out of the bottom of the element.</p>
+
+<p>The name of the <code>flow-root</code> keyword refers to the fact that you're creating something that serves, in essence, like a new root element (like {{HTMLElement("html")}} does), given how the new context is created and its flow layout functions.</p>
+
+<h2 id="Inline_formatting_contexts">Inline formatting contexts</h2>
+
+<p>Inline formatting contexts exist inside other formatting contexts and can be thought of as the context of a paragraph. The paragraph creates an inline formatting context inside which such things as {{HTMLElement("strong")}}, {{HTMLElement("a")}}, or {{HTMLElement("span")}} elements are used on text.</p>
+
+<p>The box model does not fully apply to items participating in an inline formatting context. In a horizontal writing mode line, horizontal padding, borders and margin will be applied to the element and push the text away left and right. However, margins above and below the element will not be applied. Vertical padding and borders will be applied but may  overlap content above and below as, in the inline formatting context, the line boxes will not be pushed apart by padding and borders.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}</p>
+
+<h2 id="Other_formatting_contexts">Other formatting contexts</h2>
+
+<p>This guide covers flow layout and is therefore not referring to other possible formatting contexts. As such, it is useful to understand that creating any kind of formatting context will change the way elements inside that formatting context behave. This behavior is always described in the specification and also here on MDN.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>In this guide, we have looked in more detail at the block and Inline formatting contexts and the important subject of creating a block formatting context (<abbr title="Block Formatting Context">BFC</abbr>). In the next guide, we will find out <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="See_also">See also</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>