управляем потоком элементов — учебник CSS
В данном уроке мы расскажем о весьма важной теме, а именно о потоке HTML-документа, а также о способах управления им с помощью CSS-свойств float и clear.
Последовательность отображения элементов HTML
По умолчанию HTML-документ формируется сверху вниз, от верхнего края окна браузера по направлению к нижнему краю. Такова и очередность появления элементов веб-страницы. Порядок вывода называется потоком документа.
На скриншоте ниже — пример стандартного порядка вывода элементов:
В CSS существует несколько инструментов для управления этим потоком. Например, вы можете задавать обтекание элементов, а также вытаскивать их из общего потока. Об одном из этих инструментов — свойстве float
— пойдет речь далее.
CSS float
Элемент, к которому применено свойство float, прижимается к левому или к правому краю родительского элемента (в зависимости от заданного значения), а все элементы, которые расположены ниже, поднимаются и словно обтекают данный элемент. Для лучшего понимания представьте себе камень, который обтекает вода. Собственно, именно поэтому такие элементы еще называют «плавающими».
Данное свойство широко применяется в верстке, поэтому очень важно понять его работу. Float используется для создания макетов с несколькими колонками, навигационных меню, галерей и многого другого.
Давайте рассмотрим значения, которые может принимать свойство float. Их всего три:
left
— элемент выравнивается по левой стороне. Элементы, находящиеся ниже в потоке, обтекают его с правой стороны.right
— значение, противоположное предыдущему. Элемент выравнивается по правой стороне, а элементы, находящиеся ниже в потоке, обтекают его слева по левому краю.none
— элемент не обтекается и находится в своей обычной позиции.
Как уже упоминалось, элемент со свойством float прижимается к левой либо правой стороне родительского элемента. Это может быть как основной контейнер веб-страницы, так и небольшой блок, скажем, сайдбар.
Применять данное свойство можно как к строчным, так и к блочным элементам. Но поскольку блочный элемент по умолчанию занимает всю ширину контейнера, то при использовании float
с блоком рекомендуется задать ему ширину width
и таким образом оставить место для содержимого, которое должно обходить элемент. Иными словами, необходимо дать воде возможность обтекать камень, и не перекрывать поток.
Ниже показан наглядный пример работы свойства float со значениями left
и right
:
Как видите, CSS позволяет легко и быстро создать макет из нескольких колонок, используя всего лишь два свойства в паре — float
и width
. А задать обтекание картинки текстом еще легче — мы просто применили к ней свойство float:right
.
Отмена обтекания: свойство clear
В верстке практически всегда существует необходимость сбросить обтекание после определенного элемента. Например, в случае, когда основной блок веб-страницы обтекается боковой колонкой (сайдбаром), скорее всего, нам понадобится отменить обтекание после сайдбара. Ведь это определенно не последний элемент на странице, и, как минимум, есть еще футер — нижняя часть страницы, «подвал», который должен располагаться внизу, никуда не съезжать и ничего не обтекать.
Сейчас на скриншоте обтекание после сайдбара не отменено, и блок-футер ведет себя странным образом, пытаясь обтекать элемент выше (но ничего не выходит, поскольку ширина как минимум одного элемента этого сделать не позволяет — элемент «застряет»):
Как сделать сброс обтекания? В этом нам поможет свойство clear и его значения:
left
— элемент, к которому применяется свойство clear:left, перестает обтекать элемент со свойством float:left, однако правое обтекание сохраняется.right
— элемент, к которому применяется свойство clear:right, перестает обтекать элемент со свойством float:right, однако левое обтекание сохраняется.both
— полностью отменяет обтекание со всех сторон. Элемент смещается вниз и образовывает стандартный поток. На следующие за ним элементы обтекание также перестает влиять.none
— отменяет очистку clear. Элемент будет вести себя, как обычно, и на него будут влиять настройки float.
Воспользуемся полученными знаниями и зададим нашему футеру свойство clear:both
:
В итоге футер выровнялся и разместился на своем месте. Кстати, также стал виден результат работы свойства margin-bottom:10px
, которое было ранее применено к сайдбару.
Поддержка браузерами
Свойства float и clear поддерживаются всеми использующимися браузерами, включая IE6 и IE7.
Далее в учебнике: практический урок с закреплением полученных знаний.
Обтекание float и clear
CSS свойство float
определяет, по какой стороне должен выравниваться элемент, при этом остальные элементы будут обтекать его с другой стороны.
CSS свойство clear
определяет, с какой стороны элемента запрещено его обтекание другими элементами.
Свойство float
Свойство float
используется для позиционирования и форматирования содержимого. Например, чтобы разместить изображение слева от текста.
Свойство float
может принимать следующие значения:
-
left
— Элемент выравнимается по левому краю контейнера. -
right
— Элемент выравнимается по правому краю контейнера -
none
— Элемент никак не выравнивается (будет отображаться там, где он находится в потоке). Значение по умолчанию. -
inherit
— Значение наследуется от родительского элемента.
Самое простое и очевидное использование свойства
, это когда нужно, чтобы текст обтекал изображение.
Пример — float: right;
В следующем примере изображение располагается справа, и текст обтекает его слева:
Прежде всего, курс на социально-ориентированный национальный проект способствует повышению качества благоприятных перспектив. Господа, синтетическое тестирование прекрасно подходит для реализации глубокомысленных рассуждений. Кстати, предприниматели в сети интернет, инициированные исключительно синтетически, смешаны с не уникальными данными до степени совершенной неузнаваемости, из-за чего возрастает их статус бесполезности…
img { float: right; }
Пример — float: left;
В следующем примере изображение располагается слева, и текст обтекает его справа:
Значимость этих проблем настолько очевидна, что повышение уровня гражданского сознания требует анализа системы массового участия. Сложно сказать, почему базовые сценарии поведения пользователей могут быть разоблачены. В целом, конечно, глубокий уровень погружения позволяет выполнить важные задания по разработке стандартных подходов…
img { float: left; }
Пример — float: none;
В следующем примере изображение располагается там, где оно определяется в HTML коде:
Как принято считать, тщательные исследования конкурентов призывают нас к новым свершениям, которые, в свою очередь, должны быть преданы социально-демократической анафеме. Предварительные выводы неутешительны: синтетическое тестирование не оставляет шанса для экспериментов, поражающих по своей масштабности и грандиозности…
img { float: none; }
Пример — Расположение рядом друг с другом
Обычно элементы div отображаются друг над другом. Однако, если мы используем свойство float: left;
, то мы сможем расположить их рядом друг с другом:
Div 1
Div 2
Div 3
div { float: left; padding: 15px; } .div1 { background: red; } .div2 { background: yellow; } .div3 { background: green; }
Свойство clear
Когда мы используем свойство float
и нам нужен следующий далее элемент (не тот, который справа или слева), то нам придется очистить обтекание, а именно, использовать свойство clear
.
Свойство clear
определяет, что должно происходить с элементом, который идет следом за плавающим элементом. Должно ли обтекание действовать и дальше, или его следует сбросить.
Свойство clear
может принимать следующие значения:
-
none
— Разрешает обтекание элемента с обоих сторон. Значение по умолчанию. -
left
— Очищает обтекание элемента с левой стороны. -
right
— Очищает обтекание элемента с правой стороны. -
both
— Очищает обтекание элемента с обоих сторон. -
inherit
— Значение наследуется от родительского элемента.
При очистке обтекания нужно следить, чтобы очистка была с той же стороны, что и обтекание. Т.е. если плавающий элемент расположен слева (float: left), то и очистка должна быть слева (clear: left). Тогда на веб-странице плавающий элемент будет обтекаться как и раньше, а очищенный элемент будет отображаться под ним.
В следующем примере очищается левое обтекание. Это означает, что элемент <div2> будет вытолкнут под плавающий слева элемент <div1>:
div1 { float: left; } div2 { clear: left; }
Прием clearfix
Если высота плавающего элемента больше, чем высота его контейнера, то он будет «переполнять» его и выходить за его пределы. Чтобы это исправить, можно воспользоваться специальным приемом clearfix.
Без clearfix
С clearfix
.clearfix { overflow: auto; }
Приведенный выше код будет работать до тех пор, пока вы будете контролировать все отступы и поля (иначе у элемента появятся полосы прокрутки). Современный прием clearfix безопаснее, и в настоящее время следующий код используется на большинстве веб-страницах:
.clearfix::after { content: ""; clear: both; display: table; }
Примеры использования float
Ниже демонстрируются некоторые наиболее частые варианты использования свойства float
.
Сетка блоков / Равная ширина блоков
Блок 1
Блок 2
Блок 1
Блок 2
Блок 3
При помощи свойства float
можно очень легко располагать блоковые элементы рядом друг с другом:
* { box-sizing: border-box; } .box { float: left; width: 33.33%; /* три блока (25% для четырех, 50% для двух и т. д.) */ padding: 50px; /* если нужен отступ между изображениями */ }
Что такое box-sizing?
Можно очень просто создать три плавающих блока, расположенных рядом друг с другом. Однако, если вы добавите что-то, что увеличит ширину каждого блока (например, рамку или отступ), то выравненность блока сломается. Свойство box-sizing
позволяет включить отступы и рамки в общую ширину (и высоту) блока и сделать так, чтобы они оставались внутри самого блока. Таким образом, их изменение никак не повлияет на расположение блока.
Изображения в один ряд
Сетка из блоков также может использоваться для отображения нескольких изображений в один ряд:
.img-container { float: left; width: 33.33%; /* три контейнера (25% для четырех, 50% для двух и т.д.) */ padding: 50px; /* если нужен отступ между изображениями */ }
Одинаковая высота блоков
Предыдущие примеры показывают, как сделать плавающие блоки одинаковой ширины. Однако, создать плавающие блоки одинаковой высоты не так просто.
Тем не менее, самый простой способ решить эту проблему, это задать для блоков фиксированную высоту, как в следующем примере:Блок 1
Какой-то контент, какой-то контент, какой-то контент
Блок 2
Какой-то контент, какой-то контент, какой-то контент
Какой-то контент, какой-то контент, какой-то контент
Какой-то контент, какой-то контент, какой-то контент
.box { height: 500px; }
Тем не менее, такой подход полностью лишен гибкости. Все отлично, если вы можете гарантировать, что эти блоки всегда будут иметь одно и то же количество контента. Однако в большинстве случаев размер контента меняется. Если посмотреть вышеприведенный пример на мобильном телефоне, то вы увидите, что контент во втором блоке вылезет за пределы своего контейнера. В этом случае на помощь может прийти система CSS3 Flexbox, так как она автоматически растягивает блоки таким образом, чтобы они соответствовали самому большому блоку:
Блок 1 – Это кое какой текст, чтобы сделать действительно длинный контент. Это кое какой текст, чтобы сделать действительно длинный контент. Это кое какой текст, чтобы сделать действительно длинный контент.
Блок 2 – Моя высота будет соответствовать высоте Блока 1.
<style> .flex-container { display: flex; flex-wrap: nowrap; background-color: DodgerBlue; } .flex-container .box { background-color: #f1f1f1; width: 50%; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> <div> <div>Блок 1 – Это кое какой текст, чтобы сделать действительно длинный контент. Это кое какой текст, чтобы сделать действительно длинный контент. Это кое какой текст, чтобы сделать действительно длинный контент.</div> <div>Блок 2 – Моя высота будет соответствовать высоте Блока 1.</div> </div>
Меню навигации
Свойство float
также можно использовать со списком гиперссылок для создания горизонтального меню навигации:
<style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } . active { background-color: red; } </style> </head> <body> <ul> <li><a href="#home">Главная</a></li> <li><a href="#news">Новости</a></li> <li><a href="#contact">Контакты</a></li> <li><a href="#about">О нас</a></li> </ul>
Все CSS свойства управления плавающими элементами
Свойство | Описание |
---|---|
box-sizing | Определяет алгоритм вычисления ширины и высоты элемента |
float | Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с другой стороны |
clear | Определяет, с какой стороны элемента запрещено его обтекание другими элементами |
clear | WebReference
Отменяет действие float с указанной стороны для вышестоящих элементов.
Краткая информация
Значение по умолчанию | none |
---|---|
Наследуется | Нет |
Применяется | К блочным элементам |
Анимируется | Нет |
Синтаксис
clear: none | left | right | bothСинтаксис
Описание | Пример | |
---|---|---|
<тип> | Указывает тип значения. | <размер> |
A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
[ ] | Группирует значения. | [ crop || cross ] |
* | Повторять ноль или больше раз. | [,<время>]* |
+ | Повторять один или больше раз. | <число>+ |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
# | Повторять один или больше раз через запятую. | <время># |
Значения
- none
- Отменяет действие clear, при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек.
- both
- Отменяет действие float одновременно с правого и левого краёв. Это значение рекомендуется устанавливать, когда требуется отменить обтекание элемента, но неизвестно точно с какой стороны.
- left
- Отменяет действие float со значением left.
- right
- Отменяет действие float со значением right.
Песочница
float: left
float: right
clear
none left right both
div { clear: {{ playgroundValue }}; }
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>clear</title> <style> . pull-left { float: left; padding-right: 10px; } .clearfix { clear: both; } </style> </head> <body> <div><img src=»image/figure.jpg» alt=»»></div> <div></div> <p>Бихевиоризм, как бы это ни казалось парадоксальным, просветляет сублимированный стимул, так, например, Ричард Бендлер для построения эффективных состояний использовал изменение субмодальностей.</p> </body> </html>Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства clear
Объектная модель
Объект.style.clear
Примечание
В браузере Internet Explorer до версии 6 включительно наблюдается ошибка под названием «эффект ку-ку», когда элементы c clear, соприкасающиеся с плавающими элементами (у которых задано свойство float), могут исчезать.
В браузере Internet Explorer 7 свойство clear не действует для элементов, у которых одновременно задано float со значением, не совпадающим с clear.
Спецификация
Спецификация | Статус |
---|---|
CSS Level 2 (Revision 1) | Рекомендация |
CSS Level 1 | Рекомендация |
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
4 | 8 | 12 | 1 | 3.5 | 1 | 1 |
1 | 1 | 6 | 1 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Форматирование
См. также
- Подробнее о позиционировании
Float и clear в CSS — инструменты блочной верстки
Обновлено 10 января 2021 Просмотров: 73 251 Автор: Дмитрий ПетровЗдравствуйте, уважаемые читатели блога KtoNaNovenkogo. ru. Сегодня мы продолжаем изучать классический CSS и на очереди у нас плавающие элементы, создаваемые с помощью Float. Так же мы затронем предназначение правила Clear (both, left, right) и посмотрим на примерах горизонтального меню и трехколоночного макета, как все это можно использовать на практике.
Чуть ранее мы с вами уже рассмотрели многие аспекты языка стилевой разметки, о которых вы можете узнать из составляемого по ходу повествования Справочника CSS. Таблицы каскадных стилей изучать значительно сложнее, чем чистый Html, и если вам что-то покажется сложным и на первых порах не понятным, то ничего странного и страшного тут нет. Попробуете на практике, набьете руку и все устаканится. Удачи!
Float — создание плавающих элементов в CSS коде
Когда мы вставляем в документ несколько тегов подряд, то ожидаем их появление на странице примерно в том же порядке, в котором они и были прописаны в коде. Например, при создании текста мы вставляем заголовки, абзацы, списки и т. п., чтобы увидеть их на вебстранице следующими в том же самом порядке.
Но в CSS имеются два правила, которые могут это изменить. Речь идет о float и position. Когда к тэгам не применяются эти два правила, то такой вариант называется кодом в нормальном потоке.
С помощью float мы создаем так называемые плавающие элементы. Кстати, даже в чистом Html мы уже с вами сталкивались с подобным, когда для картинок прописывали атрибут Align со значениями Left или Right (читайте про обтекание картинок текстом и тег Img).
У этого правила имеется три возможных значения (по спецификации консорциума W3C), причем по умолчанию используется значение None, т.е. изначально у нас никаких плавающих элементов нет:
Значения Left и Right как раз и позволяют создавать плавание. При этом свойства такого тега поменяются и он иначе будет взаимодействовать с другими. Давайте рассмотрим все это на примере. Возьмем один строчный тэг Span и два блочных элемента Div.
Помните, в статье про назначение height и width я говорил, что для строчных элементов эти правила работать не будут, т.е. для них нельзя задать высоту и ширину. Поэтому для демонстрации изменения свойств плавающего элемента я добавляю строчному тегу Span правила height и width, которые в обычной ситуации работать, естественно, не будут.
Все правила я буду прописывать с помощью атрибута Style (в профессиональной верстке этот способ практически не используется), о котором вы сможете прочитать по приведенной ссылке. Также для наглядности я подсвечу тэги фоном с помощью правила background:
<span>Строчный</span> <div>Блочный</div> <div>Блочный</div>
Теперь давайте пропишем для Span правило float со значение Left и посмотрим что из этого выйдет (для наглядности еще зададим нашему вновь испеченному плавающему блоку еще и отступ margin в 5px со всех сторон (margin:5px), чтобы было понятнее его взаимоотношение с соседними тэгами:
Наш элемент начинает плавать влево (ибо мы прописали float:left). При этом заработали ширина и высота, заданные в правилах height и width, не смотря на то, что Span изначально был строчным тегом. Кроме этого заработал и margin по высоте (отступ до соседей), который для строчных тэгов изначально был бесполезен.
Отсюда мы делаем вывод, что после прописывания float элемент стал совершенно другим и не похожим на то, чем он был до этого. Кроме этого он стал по другому взаимодействовать с другими тегами.
Способы взаимодействия зависят от того, какое значение Display для него прописано, но в основном мы будет работать с блоками (поэтому и верстка называется блочной), для которых это CSS правило имеет значение block.
Чаще всего это будет контейнер Div — идеален для построения блочной схемы, т.к. изначально имеет нулевые margin и padding, а height и width у него имеют значение Auto. Т.о. Div является структурным блоком, так же как и Span, у которого тоже все нулевое.
Но давайте вернемся к нашим баранам, а именно опишем все те изменения, которые происходят с тегом, когда к нему применяется правило Float со значением Left или Right:
- В не зависимости от того, каким он был до этого, он становится блочным (соответствует display:block)
- Не смотря на то, что он становится блочным, его размер будет определяться объемом заключенного в него контента (проявляется некоторая специфика). Т.е. если я в нашем примере уберу значение ширины плавающего контейнера (width:250px), то ширина его будет уже определяться количеством заключенного в него текста:
- Плавающий элемент (с float left или right) в «Margin-colloapse» не участвует, т.е. не делится с соседними элементами своими отступами.
- Они не замечают соседние блочные элементы (с display: block), т.е. они с ними не взаимодействуют. Это можно видеть из приведенного чуть выше скриншота, где зеленый блок (div — зеленый прямоугольник) стоит так, как будто бы плавающего Span и не существует.
- А вот строчные тэги (с display: inline) обтекают плавающие блоки. На приведенном чуть выше скриншоте это видно по тому, что текст заключенный в Div обтекает Span.
Clear (both, left, right) и горизонтальное меню на Float
Возникает вопрос: а можно ли блоки, стоящие в коде ниже плавающего элемента (с float:left или right), заставить с ним взаимодействовать (т.е. выстраивать свое положение в зависимости от размеров плавающих блоков)? Оказывается можно, и для этого в CSS предусмотрено специальное правило Clear. Оно имеет четыре допустимых значения (none используется по умолчанию):
Когда мы для какого-либо Html тега прописываем CSS правило Clear, то это означает, что этот самый элемент должен будет учесть все плавающие и стоящие перед ним в коде блоки:
- Слева, если прописан clear:left
- Справа при right
- Везде при clear:both (означает с обеих сторон)
Давайте попробуем посмотреть на примере clear:left для приведенного чуть выше скриншота (его мы пропишем для зеленого Div контейнера):
<span>Float блок</span> <div>Блочный</div> <div>Блочный</div>
Т.о. мы заставили контейнер Div увидеть и учесть плавающий слева от него элемент. Если для этого же тега прописать clear:right, то никаких изменений не произойдет, ибо плавающих вправо блоков (с right) у нас в коде перед этим тэгом не наблюдается.
Если же использовать clear:both, то будут учтены все плавающие блоки (и влево, и вправо — какие найдутся). Both используют в тех случаях, когда неизвестно с какой из сторон появится элемент плавающий и высокий. Именно его и можно чаще всего встретить в коде в наше время.
Ну, и давайте на небольшом примере посмотрим для чего же может быть использовано Float при верстке сайта. Дело в том, что с помощью плавающих блоков можно создать горизонтальное меню из обычного списка. Пусть у нас изначально имеется маркированный Html список UL такого вида:
<ul> <li><a href="#">Пункт 1</a></li> <li><a href="#">Пункт 2</a></li> <li><a href="#">Пункт 3</a></li> <li><a href="#">Пункт 4</a></li> <li><a href="#">Пункт 5</a></li> <ul>
Выглядеть это безобразие будет примерно так:
Теперь давайте уберем маркеры с помощью CSS правила list-style со значением None, а также сделаем строчные теги гиперссылок блочными с помощью display:block, подсветим их каким-либо фоном и зададим небольшие внешние отступы margin для элементов списка, чтобы их расклеить друг от друга.
Для разнообразия попробуем задать свойства с помощью тега Style, который прописывается между открывающим и закрывающим Head:
<head> <style type="text/css"> .menu{ list-style:none; margin:0; padding:10px; } .menu li a{ display:block; padding:10px; background:#ccf; } .menu li{ margin:5px; } </style> </head>
В результате картинка нашего будущего шедевра будет выглядеть гораздо более похожим на меню, но, правда, на меню вертикальное, а нам ведь хочется создать горизонтальное с помощью Float:
Сделать из этого меню горизонтальное можно будет, всего лишь добавив элементу списка Li правило float:left:
.menu li{ margin:5px; float:left; }
Почему получилось именно так? Плавающий блок (с float отличным от none), когда ему надо выстроиться, смотрит на соседние тэги, на границы контейнера, и встает так высоко на вебстранице, как только сможет. Так и сделал «Пункт 1» — встал максимально высоко как только мог и потом уже поехал влево (ибо у него прописано float:left).
«Пункту 2» тоже хватило места встать максимально высоко, а затем он поехал влево и уткнулся в предыдущий плавающий блок. Тоже самое можно сказать и об остальных пунктах нашего горизонтального меню. Но что же произойдет, если в контейнере по ширине не будет хватать места для всех пунктов меню? Давайте посмотрим, искусственно сузив область просмотра:
Когда плавающему элементу (с float) не хватает места всплыть наверх, тогда он определяет нижнюю границу предыдущего плавучего блока (с другими блочными тэгами, как вы помните, плавающие не взаимодействуют) и по ней выстраивает свое вертикальное положение, а потом уже едет влево до упора. В нашем случае «Пункт 5» успешно доехал до левой границы области просмотра.
Но если бы, например, высота первого пункта оказалась бы больше, чем у четвертого, по которому «Пункт 5» определил свою верхнюю границу, то получится такая вот картина:
Если слишком высоким окажется «Пункт 4», то картина изменится на такую:
В этом случае «Пункт 5» выровнялся по высоте последнего плавающего блока и не встретив никого препятствия на пути доехал до левой границы контейнера.
Отсюда, кстати, следует вывод, что если текст в пунктах такого горизонтального меню на основе css правила float будет очень длинным, то может получиться именно так, как было показано на предыдущих скриншотах. Возможно, что делать подобное меню будет проще с помощью фоновых картинок, размер которых фиксирован. Можно использовать и display:table, но создание таких меню это уже тема отдельной статьи и, возможно, даже не одной.
Блочная верстка — создание колонок в макете с помощью Float
Но основное предназначение Float это, конечно же, создание колонок при использовании блочной верстки. Я уже об этом очень подробно писал в серии статей, посвященной созданию двух и трехколоночных макетов при Div верстке.
При создании макета страниц вам всегда будет необходимо выстраивать блочные области друг рядом с другом (например, область левой колонки, область с контентом и правой колонки). Обычные блоки в CSS встают друг под другом. Как же их поставить друг рядом с другом? Конечно же, с помощью плавающих элементов на основе Float.
Более подробно создание двух и трехколоночного макета вы сможете изучить по приведенной чуть выше ссылке, а здесь я озвучу только заложенную в этом идею без ее дальнейшей детализации. Изначально берутся три контейнера Div с присвоенными ими классами.Они и будут образовывать в конечном счете наши колонки:
<body> <div>Содержимое левой колонки</div> <div>Содержимое правой колонки</div> <div>Текст области контента</div> </body>
Затем для классов контейнеров левой и правой колонки задаем float:left и right (контейнеры для наглядности подсвечиваются фоном с помощью background), а также ограничиваем их ширину с помощью width:
<head> <style type="text/css"> #left{ background:#ccf; width:100px; float:left; } #right{ background:#fcc; width:150px; float:right; } #center{ background:#cfc; } </style> </head>
Таким образом мы получили две боковые колонки фиксированной ширины с помощью волшебного правила Float. Остается только разобраться с областью контента:
Далее нужно центральную колонку отодвинуть слева на ширину левой, а справа — на ширину правой с помощью все того же правила margin (а именно для нашего примера margin:0 150px 0 100px;):
#center{ background:#cfc; margin:0 150px 0 100px; }
Плавают только правая и левая колонки, а центральная нет. Еще раз напоминаю, что про блочную верстку вы можете почитать по приведенной чуть выше ссылке. В следующей статье будем рассматривать не менее интересное и очень значимое CSS правило Position.
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Макет CSS — плавающий и прозрачный
❮ Предыдущий Далее ❯
Свойство CSS float
указывает
как элемент должен плавать.
Свойство CSS очистить
указывает, какие элементы могут плавать рядом с очищенным элементом и с какой стороны.
Свойство float
Свойство float
используется для
позиционирование и форматирование контента, например. пусть изображение плавает слева от текста в
контейнер.
float
свойство может иметь одно из
следующие значения:
-
left
— Элемент плавает слева от своего контейнера -
справа
— Элемент плавает справа от своего контейнера -
нет
— Элемент не плавает (будет отображаться только там, где встречается в тексте). Это по умолчанию -
наследовать
— элемент наследует значение с плавающей запятой своего родителя
В простейшем случае Свойство float
можно использовать для переноса текста вокруг изображений.
Пример — float: справа;
В следующем примере указывается, что изображение должно перемещаться по справа в тексте:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac…
Пример
img {
float: right;
}
Попробуйте сами »
Пример — float: left;
В следующем примере указывается, что изображение должно перемещаться по слева в тексте:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac…
Пример
img {
float: left;
}
Попробуйте сами »
Пример — без плавающей точки
В следующем примере изображение будет отображаться именно там, где оно встречается в текст (с плавающей запятой: нет;):
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac…
Пример
img {
float: none;
}
Попробуйте сами »
Пример — плавающие рядом друг с другом
Обычно элементы div отображаются друг над другом. Однако, если мы
используйте float:left
мы можем позволить элементам плавать рядом друг с другом:
Пример
div {
с плавающей запятой: слева;
отступ: 15 пикселей;
}
.div1 {
фон: красный;
}
.div2 {
фон: желтый;
}
.div3 {
фон: зеленый;
}
Попробуйте сами »
❮ Предыдущая Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
28
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3. CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
Top Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.
clear — CSS: каскадные таблицы стилей
Свойство CSS clear
определяет, должен ли элемент перемещаться ниже (очищаться) плавающих элементов, предшествующих ему. Свойство clear
применяется к плавающим и не плавающим элементам.
При применении к неплавающим блокам он перемещает край элемента вниз до тех пор, пока он не окажется ниже края поля всех соответствующих плавающих элементов. Верхнее поле неплавающего блока схлопывается.
С другой стороны, вертикальные поля между двумя плавающими элементами не будут схлопываться. При применении к плавающим элементам край нижнего элемента перемещается ниже края поля всех соответствующих плавающих элементов. Это влияет на положение более поздних поплавков, поскольку более поздние поплавки не могут быть расположены выше, чем более ранние.
Поплавки, подлежащие очистке, — это более ранние поплавки в том же контексте форматирования блока.
Примечание: Если элемент содержит только плавающие элементы, его высота схлопывается до нуля. Если вы хотите, чтобы он всегда мог изменять размер, чтобы он содержал внутри себя плавающие элементы, установите значение элемента свойство отображения
для корневого потока
.
#контейнер { дисплей: поток-корень; }
/* Значения ключевых слов */ ясно: нет; ясно: слева; ясно: верно; ясно: оба; ясно: встроенный-старт; ясно: встроенный конец; /* Глобальные значения */ ясно: наследовать; ясно: начальный; ясно: вернуться; очистить: вернуть слой; очистить: не установлено;
Значения
-
нет
Ключевое слово, указывающее, что элемент , а не перемещен вниз, чтобы очистить прошлые плавающие элементы.
-
слева
Ключевое слово, указывающее, что элемент перемещается вниз, чтобы очистить последние левых поплавков.
-
справа
Ключевое слово, указывающее, что элемент перемещается вниз, чтобы очистить последние правых поплавков.
-
оба
Ключевое слово, указывающее, что элемент перемещается вниз, чтобы очистить как левое, так и правое поплавки .
-
линейный пуск
Ключевое слово, указывающее, что элемент перемещается вниз, чтобы очистить плавающие элементы на начальной стороне содержащего его блока , то есть левых плавающих элементов в сценариях ltr и правых плавающих элементов в сценариях rtl.
-
встроенный конец
Является ключевым словом, указывающим, что элемент перемещается вниз, чтобы очистить плавающие элементы на конечной стороне содержащего его блока , то есть правый плавает в скриптах ltr, а левый плавает в скриптах rtl.
Initial value | none |
---|---|
Applies to | block-level elements |
Inherited | no |
Computed value | as specified |
Animation type | дискретный |
чистый =
встроенный-старт |
встроенный конец |
блок-старт |
конец блока |
осталось |
справа |
топ |
дно |
нет
очистить: слева
HTML
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Фазелл сит амет диаметр Duis mattis varius dui. Suspendisse eget dolor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Этот абзац очищается слева.
CSS
.wrapper { граница: 1px сплошной черный; отступ: 10 пикселей; } .левый { граница: 1px сплошной черный; ясно: слева; } .черный { плыть налево; маржа: 0; цвет фона: черный; цвет: #fff; ширина: 20%; } .красный { плыть налево; маржа: 0; цвет фона: розовый; ширина: 20%; } п { ширина: 50%; }
ясно: правильно
HTML
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Фазелл сит амет диаметр Duis mattis varius dui. Suspendisse eget dolor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Этот абзац очищается правильно.
CSS
.wrapper { граница: 1px сплошной черный; отступ: 10 пикселей; } .верно { граница: 1px сплошной черный; ясно: верно; } . черный { поплавок: справа; маржа: 0; цвет фона: черный; цвет: #fff; ширина: 20%; } .красный { поплавок: справа; маржа: 0; цвет фона: розовый; ширина: 20%; } п { ширина: 50%; }
очистить: оба
HTML
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Фазелл сит амет диаметр Duis mattis varius dui. Suspendisse eget dolor. pulvinar лакус ак дуй.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Фазелл сит амет диаметр Duis mattis varius dui. Suspendisse eget dolor.
Этот абзац очищает оба.
CSS
.wrapper { граница: 1px сплошной черный; отступ: 10 пикселей; } .оба { граница: 1px сплошной черный; ясно: оба; } .черный { плыть налево; маржа: 0; цвет фона: черный; цвет: #fff; ширина: 20%; } .красный { поплавок: справа; маржа: 0; цвет фона: розовый; ширина: 20%; } п { ширина: 45%; }
Спецификация |
---|
Каскадные таблицы стилей, уровень 2, редакция 2 (CSS 2. 2) Спецификация # propdef-clear |
Логические свойства и значения CSS Уровень 1 # float-clear |
Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.
- Базовая коробчатая модель CSS
Обнаружили проблему с содержанием этой страницы?
- Отредактируйте страницу на GitHub.
- Сообщить о проблеме с содержимым.
- Посмотреть исходный код на GitHub.
Хотите принять участие?
Узнайте, как внести свой вклад.
Последний раз эта страница была изменена участниками MDN.
CSS Плавающая и очистка | как плавать в css, очистить оба
Автор: Авинаш Малхотра
Обновлено
- ← Переполнение CSS
- Плавающая компоновка →
- Дом
- Веб-дизайн
- УСБ
- Плавающая и очистка CSS
- Плавающий CSS
- Плавающий левый
- Плавающая компоновка
- Плавающий вправо
- CSS Прозрачный
Плавающее свойство CSS
CSS Float — это свойство позиционирования в css, используемое для размещения элемента в левом или правом углу родительского элемента и следующий элемент или текст, обтекающий слева или справа от него. Плавающий элемент не занимает места в обычном потоке. Таким образом, мы должны использовать очистку обоих после последнего плавающего элемента, чтобы избежать переноса.
По умолчанию все html-элементы не плавающие.
Плавающие значения CSS
- Нет Значение по умолчанию
- Плавающий левый
- Плавающий вправо
Пример с плавающей запятой CSS
Выберите параметр из переключателей, чтобы проверить свойство float.
: Плавающий Нет : Плавающий слева : Плавающий справа
Этот фиктивный текст будет обтекать плавающее изображение сверху слева или справа. Чтобы узнать, как работает перемещение влево, вправо и ни разу, выберите варианты выше. Этот пример поможет вам понять, как CSS плавает влево и вправо работает. Плавающее влево будет перемещать изображение слева от родительского элемента, а плавать вправо будет плавать изображение справа от родительского элемента. После float следующий элемент, то есть текст в абзаце, будет обтекать изображение.
Поплавок слева
CSS Float Left помещает элемент в левый угол родительского элемента, а другие элементы обтекают его. Плавающий элемент не занимает места в потоке. Таким образом, следующий не плавающий элемент будет обернут вокруг плавающего элемента.
В этом примере тег
остается плавающим , а абзац после тега изображения не является плавающим. Таким образом, абзац обтекает изображение. Содержимое внутри абзаца отображается рядом с изображением, но абзац обтекает изображение.
<стиль> изображение {поплавок: влево} р { фон: желтый} стиль>В этом примере тег img остается плавающим, а абзац после тега изображения не плавающим. Таким образом, абзац обтекает изображение. Содержимое внутри абзаца отображается рядом с изображением, но абзац обтекает изображение.
Поплавок слева Пример
- Список 1
- Список 2
- Список 3
- Список 4
<стиль> .list2 {стиль списка: нет} .list2 li{ с плавающей запятой: влево; } стиль> <ул>
Плавающий макет CSS
CSS с плавающей запятой в основном использовался для размещения изображений и обтекания их текстом. Но свойство CSS Float также можно использовать для создания макетов с использованием тега div. См. пример.
Левый плавающий div
Div — это общий элемент, используемый для построения макета. Div является блочным и неплавающим. Это означает, что следующий div всегда будет начинаться с новой строки.
Если ширина div auto , div будет занимать всю ширину, но если ширина div px или % , новый div все еще начинается с новой строки, так как div является блочным.
Раздел с поплавком нет
Боковой, неплавающий
Секция, неплавающий
<стиль> *{поле:0; } .wrap{ширина:800px; граница: 1px сплошная} .aside1{ширина:200px; высота: 200 пикселей; фон:цвет морской волны} .section1{ширина:600px; высота: 200 пикселей; фон:розовый} стиль> <дел>Кроме 1Раздел 1
Плавающий левый
Плавающий левый используется здесь для обоих делений. Сначала aside перемещается влево, а затем раздел div также перемещается влево. После обоих плавающих элементов используется пустой div clear , чтобы следующий элемент не обтекал плавающие деления.
Боковая, левая плавающая
Секция, левая плавающая
<стиль> *{поле:0;} .wrap{ширина:800px; граница: 1px сплошная} .aside2{ширина:200px; высота: 200 пикселей; фон:цвет морской волны; плыть налево} .section2{ширина:600px; высота: 200 пикселей; фон: розовый; плыть налево} . clear{ ясно:оба} стиль> <дел>Кроме 2Раздел 2<дел>дел>