какие два свойства могут менять естественный порядок потока css
Понятие потока
В HTML формирование элементов на странице происходит сверху вниз согласно схеме документа. Слой, размещенный в самом верху кода, отобразится раньше слоя, который расположен в коде ниже. Такая логика позволяет легко прогнозировать результат вывода элементов и управлять им. Порядок вывода объектов на странице и называется «потоком». При этом существует несколько возможностей «вырвать» элемент из потока и придать ему почти мифические свойства. Раз он не существует в потоке, то в коде его можно описать где угодно, а также выводить в заданное место окна.
Использование position
Пример 1. Фиксированный слой
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1. Чтобы текст не накладывался на слой, добавлен отступ слева. Из-за того что слой feedback не существует в потоке документа, он может располагаться в любом месте кода, в данном случае внизу.
Рис. 1. Фиксированный слой
Значение absolute свойства position также выводит элемент из потока, но в отличие от fixed слой прокручивается вместе с содержимым. Кроме этого, существенное влияние на позицию оказывают свойства родителя. Возможны два основных варианта.
В первом случае все просто, элемент ведет себя как в примере 1, за исключением того, что не закрепляется строго на одном месте, а может прокручиваться одновременно со страницей. Во втором варианте положение элемента задается относительно родителя.
Пример 2. Абсолютное позиционирование
XHTML 1.0 CSS 2.1 CSS3 IE Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Положение слоя на странице
Обратите внимание, что абсолютно позиционированный элемент может выходить за верхний и левый край окна браузера, при этом не возникает полос прокрутки. Также при использовании свойства position ширина слоя автоматически приравнивается ширине контента плюс, как обычно, ширина отступов, границ и полей.
Использование float
Свойство float превращает элемент в плавающий, при этом он прижимается к левому или правому краю родителя, а текст его обходит с других сторон. Такое поведение текста напоминает поток воды, обтекающий камень, поэтому элементы с таким поведением и называются плавающими. В отличие от абсолютно позиционированных плавающие элементы не обладают властью над координатами, их не получится заставить встать в точно заданную точку, но они имеют ряд примечательных характеристик. Настолько, что свойство float для верстки стало использоваться повсеместно. Перечислим лишь ряд возможных приложений:
float может добавляться к изображениям (тег ) и блочным элементам вроде
Пример 3. Плавающий элемент
XHTML 1.0 CSS 2.1 IE Cr Op Sa 5 Fx
Результат примера показан на рис. 3.
Рис. 3. Плавающий элемент
Заметки верстальщика
суббота, 24 марта 2012 г.
Поток документа, clearfix, overflow:hidden и зачем всё это нужно
Сейчас я расскажу про поток документа, с чем его едят, проблемы с float и как их решить.
Итак, поток.
В браузерном мире и мире вёрстки есть понятие «потока документа». В HTML формирование элементов на странице происходит сверху вниз согласно схеме документа. Соответственно, блок, расположенный в коде выше, будет показан раньше, чем блок, расположенный ниже. Вот этот порядок вывода блоков страницы и называется потоком.
Если с первыми двумя всё достаточно тривиально (нужно лишь указать координаты начальной позиции блока top|bottom и left|right, и не забыть, что при абсолютном позиционировании отсчёт ведётся от ближайшего родителя с position:relative (или от начала документа, если такового не имеется)), то со вторым способом могут оказаться проблемы.
Представим себе ситуацию.
У нас есть превьюшка какого-то поста с текстом и картинкой, в котором картинка выровнена по левому краю:
И вот всё вроде бы хорошо, всё вроде бы смотрится, всё замечательно. Да? Да!
Но ровно до тех пор, пока нам не понадобится декорировать этот блок, например задать фоновый цвет, или добавить рамку.
Давайте попробуем (заодно немного приукрасим наш блок):
Что у нас получилось:
Как видите немного не тот результат, какой мы ожидали.
Почему так произошло?
Всё дело в том, что, задав картинке выравнивание по левому краю (float:left), мы вырвали её из потока документа. Таким образом граница родителя .preview высчитывается, исходя из размеров последнего дочернего элемента в потоке, а именно по границе внутреннего текста.
Но это не наши методы 🙂
И так, какие у нас есть варианты?
Существует 3 способа вернуть в поток элемент, вырванный из этого же потока:
1. дополнительный элемент со специальным CSS-свойством, очищающим поток документа: clear:both;
2. CSS-свойство overflow:hidden;
3. Так называемый clearfix.
Теперь давайте поподробнее.
1. Вставим внутрь .preview новый элемент и зададим ему стиль clear:both;
Как видите мы добились того, чего хотели. Забегая вперёд, скажу, что этот результат достигается всеми тремя способами.
Что же произошло? Читаем описание css-свойства clear:
Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.
У clear есть 3 основных значения: left, right, both. Таким образом, применяя clear мы очищаем поток с левой, с правой или обеих сторон.
Этот способ рабочий, но не семантичный. Дополнительных, не нужных элементов можно и нужно избегать всеми силами, чтобы не нарушать семантику документа.
2. overflow:hidden. С помощью этого стиля, задав его блоку родителю, создается новый контекст форматирования. Результат такой же, как и с прошлым способом.
Но у браузеров на движке Gecko (Firefox и ему подобные) есть неприятная особенность: текст в блоках, для которых задан overflow:hidden (либо auto) не выделяется дальше границ этого блока. Но эта особенность лично мне никак не мешала.
3. Clearfix. Это название css-класса, имя которго сложилось исторически 🙂
Существует несколько вариантов такого класса, рабочих и не очень. Я лишь приведу тот, которым пользуюсь я сам:
Не буду подробно расписывать что здесь и зачем, это уже выходит за рамки данной статьи (это всегда можно нагуглить).
Добавив данный класс нашему блоку .preview мы так же добиваемся необходимого нам внешнего вида:
И так, подведём итог.
Все способы работают и все работают кроссбраузерно.
Но:
1й способ не семантичный, а семантику необходимо соблюдать. Зачем? Почитайте.
2й и 3й способ одинаково хороши для подавляющего большинства случаев.
Базовый поток
Эта статья объясняет нормальный/базовый поток (normal flow) или способ, которым элементы страницы располагаются на веб-странице по умолчанию.
| Что нужно знать прежде чем изучать: | Основы HTML (изучите Введение в HTML), и понимания как работает CSS (изучите Введение в CSS.) |
|---|---|
| Цель: | Объяснить как браузеры размещают элементы на веб-странице по умолчанию, т.е. прежде, чем мы начнём вносить какие-либо изменения. |
Как говорилось ранее, элементы на веб-странице располагаются в нормальном потоке, если вы не применили к ним ни единого CSS для изменения их поведения. И, как мы уже выяснили, вы можете изменить поведение элементов либо путём изменения их положения в этом нормальном потоке, либо удалением этих элементов из этого потока. Хорошо структурированный документ, читабельный в нормальном потоке является лучшим путём начала любой веб-страницы. Это гарантирует, что ваш контент будет читабельным, даже если пользователи используют очень ограниченный браузер или устройство для чтения, которое считывает содержимое страницы. Кроме того, поскольку нормальный поток предназначен для создания читабельного документа, имейте в виду, что вы не сражаетесь с первоначальным видом документа, а работаете с ним.
Прежде чем углубиться в разные способы компоновки, стоит пересмотреть некоторые из вещей, которые вы изучили в предыдущих модулях в отношении нормального потока документов.
Как элементы располагаются по умолчанию?
Строчные элементы ведут себя по-другому — они не появляются на новых строках; они располагаются на той же строке, что и другие и любой смежной или завёрнутый текст располагается на всю ширину внутри элемента уровня родительского блока, до тех пор, пока не закончится пространство. Если пространства нет, тогда текст и/или элементы перейдут на новую строку (не с абзаца).
Если два смежных элемента имеют заданные для них поля/внешние отступы (margin) и эти поля соприкасаются друг с другом, большее из них остаётся, а меньшее исчезает — это называется схлопывание полей (margin collapsing), и мы рассматривали это ранее.
Давайте посмотрим на пример, который объясняет всё из того, что мы рассмотрели в данной статье:
Поток документа
В HTML формирование элементов на странице происходит сверху вниз согласно схеме документа. Слой, размещенный в самом верху кода, отобразится раньше слоя, который расположен в коде ниже. Такая логика позволяет легко прогнозировать результат вывода элементов и управлять им. Порядок вывода объектов на странице и называется «потоком». При этом существует несколько возможностей «вырвать» элемент из потока и придать ему почти мифические свойства. Раз он не существует в потоке, то в коде его можно описать где угодно, а также выводить в заданное место окна.
Использование position
Пример 3.10. Фиксированный слой
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 3.20. Чтобы текст не накладывался на слой, добавлен отступ слева. Из-за того что слой feedback не существует в потоке документа, он может располагаться в любом месте кода, в данном случае внизу.
Рис. 3.20. Фиксированный слой
Значение absolute свойства position также выводит элемент из потока, но в отличие от fixed слой прокручивается вместе с содержимым. Кроме этого, существенное влияние на позицию оказывают свойства родителя. Возможны два основных варианта.
В первом случае все просто, элемент ведет себя как в примере 3.10, за исключением того, что не закрепляется строго на одном месте, а может прокручиваться одновременно со страницей. Во втором варианте положение элемента задаётся относительно родителя.
Пример 3.11. Абсолютное позиционирование
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 3.21. Браузер IE до версии 9.0 не поддерживает формат RGBA для цвета.
Рис. 3.21. Положение слоя на странице
Обратите внимание, что абсолютно позиционированный элемент может выходить за верхний и левый край окна браузера, при этом не возникает полос прокрутки. Также при использовании свойства position ширина слоя автоматически приравнивается ширине контента плюс, как обычно, ширина отступов, границ и полей.
Использование float
Свойство float превращает элемент в плавающий, при этом он прижимается к левому или правому краю родителя, а текст его обходит с других сторон. Такое поведение текста напоминает поток воды, обтекающий камень, поэтому элементы с таким поведением и называются плавающими. В отличие от абсолютно позиционированных плавающие элементы не обладают властью над координатами, их не получится заставить встать в точно заданную точку, но они имеют ряд примечательных характеристик. Настолько, что свойство float для вёрстки стало использоваться повсеместно. Перечислим лишь ряд возможных приложений:
float может добавляться к изображениям (тег ), блочным элементам вроде
Пример 3.12. Плавающий элемент
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат примера показан на рис. 3.22.
Рис. 3.22. Плавающий элемент
Управление потоком в CSS: создаём контекст форматирования
Статья не содержит универсальных решений, но открывает вашему взору дополнительный инструментарий для управления потоком.
Вот полный перевод абзаца о контекстном форматировании блочных элементов (из css спецификации):
Плавающим ( float ), абсолютно спозиционированным, отображаемым как табличные ячейки ( table-cell ) или заголовки таблиц ( table-caption ), строково-блоковым ( inline-block ) и элементам с overflow отличными от visible (не считая случаев, когда значение наследуется областью просмотра) устанавливается новый контекст для форматирования
С плавающими и абсолютно спозиционированными элементами, думаю, всё ясно; с ‘ overflow ‘ тоже. Сразу добавлю, что эксперименты с заголовками таблиц ни к чему не привели.
Что бы не дублировать, оглашу, что новый код используется везде с изначально написанным следующим стилевым кодом:
и разметкой:
Данный код вот так отрисовывается в браузерах:
1. display:inline-block
2. display:table-cell
3. Float
Так как браузер создаёт отдельный контекст форматирования для данных примеров также как и для абсолютного позиционирования можно предполагать, что для лучшей производительности элементы, которыми манипулирует джава скрипт лучше было бы помещать не только в абсолютно позиционируемые контейнеры, но и в любые из вышеперечисленных.