Поток в html css

Поточная раскладка CSS

Нормальный поток (normal flow) или поточная раскладка (flow layout), это способ отображения блочных (block) и строчных (inline) элементов на странице. Сначала раскладка этих элементов происходит согласно правилам потока, после чего в неё могут быть внесены изменения, например, относительное позиционирование.

По сути поток представляется собой набор сущностей, которые работают вместе и знают друг о друге. Когда некоторая сущность вынимается из потока (out of flow), то она работает независимо.

В нормальном потоке строчные (inline) элементы отображаются в направлении строки (inline direction), то есть в том же направлении, как идут слова в предложении в соответствии с режимом письма (writing mode) документа. Блочные (block) элементы отображаются один за другим, также как параграфы в соответствии с режимом письма документа. Поэтому в английском языке строчные элементы отображаются один за другим, начиная слева, а блочные элементы выкладываются на странице сверху вниз.

Пример

Следующий пример показывает боксы уровня блока (block level) и уровня строки (inline level). Боксы уровня блока участвуют в блочном контексте форматирования, а боксы уровня строки в строчном контексте форматирования.

Два элемента параграфа с зелёной границей создают боксы уровня блока, отображающиеся один под другим.

Первое предложение также содержит элемент span с голубым фоном. Он создаёт бокс уровня строки и, следовательно, размещается внутри предложения.

Руководства

• Блочная и строчная раскладки в нормальном потоке (Block and Inline Layout in Normal Flow (en-US)).
• В потоке и вне потока (In Flow and Out of Flow (en-US)).
• Объяснение контекстов форматирования (Formatting Contexts Explained (en-US)).
• Поточная раскладка и режимы письма (Flow Layout and Writing Modes (en-US)).
• Поточная раскладка и переполнение (Flow Layout and Overflow (en-US)).

Источник

Поток

HTML документ представляет собой живой документ.

Даже без какого-либо применения CSS, HTML-документ уже содержит свои собственные правила:

• изменчивость: как содержимое адаптируется к размерам браузера;
• очерёдность: порядок, в котором появляются элементы;
• наложение: как элементы появляются друг над другом.

Это естественное поведение является логичным.

Изменчивость

В HTML содержимое — это король.

Все блочные элементы являются гибкими. Они естественным образом адаптируют свою компоновку, чтобы приспособить внутреннее содержимое:

• width: 100%
  Блок будет занимать всю доступную ширину.
• Перенос слов
  Если встроенное содержимое в блоке не помещается на одной строке, оно будет продолжено на новой строке.
• height: auto
  Высота блока изменяется автоматически, чтобы она соответствовала размеру его содержимого.

Блочный элемент будет заполнять всю доступную ширину, а его высота будет изменяться автоматически в зависимости от размера его содержимого.

• Блочный элемент по умолчанию занимает полную ширину.
• Значение height равно высоте его содержимого.

Очерёдность

Элементы HTML отображаются в том порядке, в котором они записаны в коде. Первый в коде — первый в браузере.

Каждый блок появляется в том порядке, в котором он появляется в коде HTML, сверху вниз.

Первый
 
Второй
 
Третий
 
Четвёртый
 
Пятый

Наложение

У браузера есть три измерения.

Каждый элемент HTML принадлежит воображаемому слою.

Порядок наложения зависит от того, как элементы вложены друг в друга: дочерние элементы появляются поверх своих родителей.

• Каждый вложенный элемент появляется поверх своего родителя.
• Чем глубже он по иерархии, тем выше в наложении.

 
Этот родитель позади 
Этот вложенный дочерний элемент появляется поверх своего родителя
 

Нарушение потока

Хотя поведение браузера по умолчанию является эффективным, этого бывает недостаточно для нужд вашего дизайна.

Некоторые свойства CSS позволяют нарушить поток:

• height и width могут поменять изменчивость элемента;
• float нарушает поведение элемента, а также его окружения;
• значения absolute и fixed у свойства position удаляют элемент из потока;
• z-index может менять порядок наложения элементов.

Источник

Поток документа

Объяснение одной из основных концепций вёрстки и её составляющих: контекста форматирования, схлопывания отступов и выхода из потока.

Обновлено 24 августа 2022

Поток — одно из важнейших базовых понятий в вёрстке. Это принцип организации элементов на странице при отсутствии стилей: если мы напишем HTML и не напишем CSS, то отображение в браузере будет предсказуемо благодаря тому, что мы абсолютно точно знаем, как браузер располагает элементы в потоке.

Даже если к странице не подключено никаких стилей, к каждому элементу всё равно будут применяться CSS-правила, «зашитые» в движке браузера. Благодаря этим правилам заголовок крупнее заголовка , а ссылки — синие и подчёркнутые. На основании этих правил условно все элементы на странице можно разделить на две категории: блочные (block) и строчные (inline). Например, будет блочным, а или — строчным. Поменять стандартное поведение можно при помощи CSS-свойства display .

Если вообще не применять никаких стилей, браузер формирует из элементов нормальный поток. Поведение блочных элементов в нормальном потоке отличается от поведения строчных.

Контекст форматирования

Скопировать ссылку «Контекст форматирования» Скопировано

Правила расположения строчных и блочных элементов в нормальном потоке называются контекстом форматирования. Блочные элементы участвуют в формировании блочного контекста форматирования. Строчные элементы формируют строчный контекст форматирования. Расположение элементов в контексте форматирования зависит от направления письма для конкретного языка. Например, тексты на европейских языках мы читаем и пишем слева направо сверху вниз. Это означает, что по умолчанию контекст форматирования располагает блочные элементы сверху вниз, а строчные — слева направо. Но, например, в случае с восточноазиатскими языками, такими как китайский, японский и корейский, когда используется вертикальное письмо, мы видим совершенно другую картину: блочные элементы будут располагаться справа налево, а строчные — сверху вниз.

Во всех примерах далее будет рассматриваться направление письма, характерное для европейских языков: слова — слева направо, блоки — сверху вниз. Но все те же объяснения можно применять и для другого направления письма.

Блочные элементы в нормальном потоке

Скопировать ссылку «Блочные элементы в нормальном потоке» Скопировано

Блочные элементы в нормальном потоке располагаются друг под другом, всегда занимая всю доступную ширину родителя. Высота блочного элемента по умолчанию равна высоте его содержимого. Три абзаца, идущие друг за другом в HTML, будут располагаться точно в таком же порядке и на странице.

Даже если ширина блочного элемента явно задана и позволяет разместить справа ещё один такой элемент, поток всё равно продолжит выстраивать их друг под другом.

Можно воспринимать блочный элемент как поплавок, который стремится всплыть на странице как можно выше. И всплывает до тех пор, пока не встретит на пути другой элемент или границу родителя.

Строчные элементы в нормальном потоке

Скопировать ссылку «Строчные элементы в нормальном потоке» Скопировано

Строчные элементы располагаются друг за другом, как слова в предложении. В зависимости от направления письма в конкретном языке элементы могут располагаться слева направо (например, в русском языке), справа налево (как, например, в иврите) и даже сверху вниз (как иероглифы и знаки слоговых азбук в японском вертикальном письме). Ширина и высота строчного элемента равна ширине и высоте содержимого. В отличие от блочного элемента, мы не можем управлять шириной и высотой строчного элемента через CSS. Несколько строчных элементов будут стремиться уместиться на одной строке, насколько хватает ширины родителя. Если ширины родителя не хватает, то лишний текст строчного элемента переносится на следующую строку.

Схлопывание и выпадение отступов

Скопировать ссылку «Схлопывание и выпадение отступов» Скопировано

В рамках блочного контекста форматирования вертикальные расстояния между блоками задаются CSS-свойством margin . Если блоку задан нижний отступ, а следующему за ним — верхний, то можно ожидать, что итоговый отступ между блоками будет равен сумме этих двух отступов. Но в соответствии со спецификацией соприкасающиеся отступы «схлопываются». То есть как бы проваливаются один в другой. Итоговый отступ будет равен бо́льшему отступу из двух.

Если первому дочернему элементу в блоке задан верхний отступ или последнему элементу — нижний, то эти отступы «выпадают» во внешний мир из своего родителя.

Выпадение отступов из родителя можно предотвратить несколькими способами:

• Задать родителю вертикальный внутренний отступ padding — top или padding — bottom в зависимости от того, с какой стороны мы хотим предотвратить выпадение.
• Задать родителю верхнюю или нижнюю рамку по такой же логике. Рамка может быть прозрачной, главное, чтобы она была 🙂
• Задать родителю свойство overflow со значением, отличным от visible .
• Переопределить родителю свойство display на flex или grid .

Выход из потока

Скопировать ссылку «Выход из потока» Скопировано

Ранее мы выяснили, что все элементы по умолчанию находятся в нормальном потоке. Но это поведение можно поменять при помощи некоторых CSS-свойств. При изменении значений этих свойств элемент перестаёт взаимодействовать с остальными блоками в потоке. Говорят, что он «вышел из потока».

Тут нужно отметить, что элементы, вышедшие из потока, создают внутри себя своего рода мини-поток. Их дочерние элементы будут подчиняться правилам взаимодействия в потоке в пределах родителя.

Обтекание при помощи float

Скопировать ссылку «Обтекание при помощи float» Скопировано

Когда мы делаем элемент плавающим, он перестаёт взаимодействовать с другими элементами блочного контекста. При этом со строчным контекстом наш плавающий блок продолжает взаимодействовать. Текстовые элементы обтекают такой блок с одной из сторон.

Позиционирование элемента при помощи position

Скопировать ссылку «Позиционирование элемента при помощи position» Скопировано

Если задать элементу абсолютное или фиксированное позиционирование, это также приводит к выходу из потока. Но только в этом случае наш элемент не участвует даже в строчном контексте.

При абсолютном или фиксированном позиционировании элемент как бы поднимается над содержимым страницы, и становится «не виден» всем остальным блокам.

Источник