что значит clear both
Float и clear в CSS — инструменты блочной верстки
Здравствуйте, уважаемые читатели блога 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 правило 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:
Clear (both, left, right) и горизонтальное меню на Float
Возникает вопрос: а можно ли блоки, стоящие в коде ниже плавающего элемента (с float:left или right), заставить с ним взаимодействовать (т.е. выстраивать свое положение в зависимости от размеров плавающих блоков)? Оказывается можно, и для этого в CSS предусмотрено специальное правило Clear. Оно имеет четыре допустимых значения (none используется по умолчанию):
Когда мы для какого-либо Html тега прописываем CSS правило Clear, то это означает, что этот самый элемент должен будет учесть все плавающие и стоящие перед ним в коде блоки:
Давайте попробуем посмотреть на примере clear:left для приведенного чуть выше скриншота (его мы пропишем для зеленого Div контейнера):
Т.о. мы заставили контейнер Div увидеть и учесть плавающий слева от него элемент. Если для этого же тега прописать clear:right, то никаких изменений не произойдет, ибо плавающих вправо блоков (с right) у нас в коде перед этим тэгом не наблюдается.
Если же использовать clear:both, то будут учтены все плавающие блоки (и влево, и вправо — какие найдутся). Both используют в тех случаях, когда неизвестно с какой из сторон появится элемент плавающий и высокий. Именно его и можно чаще всего встретить в коде в наше время.
Ну, и давайте на небольшом примере посмотрим для чего же может быть использовано Float при верстке сайта. Дело в том, что с помощью плавающих блоков можно создать горизонтальное меню из обычного списка. Пусть у нас изначально имеется маркированный Html список UL такого вида:
Выглядеть это безобразие будет примерно так:
Теперь давайте уберем маркеры с помощью CSS правила list-style со значением None, а также сделаем строчные теги гиперссылок блочными с помощью display:block, подсветим их каким-либо фоном и зададим небольшие внешние отступы margin для элементов списка, чтобы их расклеить друг от друга.
Для разнообразия попробуем задать свойства с помощью тега Style, который прописывается между открывающим и закрывающим Head:
В результате картинка нашего будущего шедевра будет выглядеть гораздо более похожим на меню, но, правда, на меню вертикальное, а нам ведь хочется создать горизонтальное с помощью Float:
Сделать из этого меню горизонтальное можно будет, всего лишь добавив элементу списка Li правило float:left:
Почему получилось именно так? Плавающий блок (с float отличным от none), когда ему надо выстроиться, смотрит на соседние тэги, на границы контейнера, и встает так высоко на вебстранице, как только сможет. Так и сделал «Пункт 1» — встал максимально высоко как только мог и потом уже поехал влево (ибо у него прописано float:left).
«Пункту 2» тоже хватило места встать максимально высоко, а затем он поехал влево и уткнулся в предыдущий плавающий блок. Тоже самое можно сказать и об остальных пунктах нашего горизонтального меню. Но что же произойдет, если в контейнере по ширине не будет хватать места для всех пунктов меню? Давайте посмотрим, искусственно сузив область просмотра:
Когда плавающему элементу (с float) не хватает места всплыть наверх, тогда он определяет нижнюю границу предыдущего плавучего блока (с другими блочными тэгами, как вы помните, плавающие не взаимодействуют) и по ней выстраивает свое вертикальное положение, а потом уже едет влево до упора. В нашем случае «Пункт 5» успешно доехал до левой границы области просмотра.
Но если бы, например, высота первого пункта оказалась бы больше, чем у четвертого, по которому «Пункт 5» определил свою верхнюю границу, то получится такая вот картина:
Если слишком высоким окажется «Пункт 4», то картина изменится на такую:
В этом случае «Пункт 5» выровнялся по высоте последнего плавающего блока и не встретив никого препятствия на пути доехал до левой границы контейнера.
Отсюда, кстати, следует вывод, что если текст в пунктах такого горизонтального меню на основе css правила float будет очень длинным, то может получиться именно так, как было показано на предыдущих скриншотах. Возможно, что делать подобное меню будет проще с помощью фоновых картинок, размер которых фиксирован. Можно использовать и display:table, но создание таких меню это уже тема отдельной статьи и, возможно, даже не одной.
Блочная верстка — создание колонок в макете с помощью Float
Но основное предназначение Float это, конечно же, создание колонок при использовании блочной верстки. Я уже об этом очень подробно писал в серии статей, посвященной созданию двух и трехколоночных макетов при Div верстке.
При создании макета страниц вам всегда будет необходимо выстраивать блочные области друг рядом с другом (например, область левой колонки, область с контентом и правой колонки). Обычные блоки в CSS встают друг под другом. Как же их поставить друг рядом с другом? Конечно же, с помощью плавающих элементов на основе Float.
Более подробно создание двух и трехколоночного макета вы сможете изучить по приведенной чуть выше ссылке, а здесь я озвучу только заложенную в этом идею без ее дальнейшей детализации. Изначально берутся три контейнера Div с присвоенными ими классами.Они и будут образовывать в конечном счете наши колонки:
Затем для классов контейнеров левой и правой колонки задаем float:left и right (контейнеры для наглядности подсвечиваются фоном с помощью background), а также ограничиваем их ширину с помощью width:
Таким образом мы получили две боковые колонки фиксированной ширины с помощью волшебного правила Float. Остается только разобраться с областью контента:
Далее нужно центральную колонку отодвинуть слева на ширину левой, а справа — на ширину правой с помощью все того же правила margin (а именно для нашего примера margin:0 150px 0 100px;):
Плавают только правая и левая колонки, а центральная нет. Еще раз напоминаю, что про блочную верстку вы можете почитать по приведенной чуть выше ссылке. В следующей статье будем рассматривать не менее интересное и очень значимое CSS правило Position.
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Комментарии и отзывы (12)
Спаасибо, многому научился благодаря вашему блогу. Подскажите пожалуйста. Такая ситуация: главная страница, анонс новости, а под ним аватар (типа «booble») коммента и кол-во комментов в цифрах. Мне нужно, чтобы эта связка booble+цифра отображалась в той же строке где и окончание новости. А она всё равно отображается под анонсом новости. Вот код:
— анонс новости, а интересующие комменты
Александр: ну, точно сказать не могу, но я бы попробовал CSS свойство display: inline
Спасибо, у Вас хороший блог!
«В этом случае «Пункт 5» выровнялся по высоте последнего плавающего блока и не встретив никого на пути доехал до левой границы контейнера.»
Скажите а как можно реализовать также, как на третьем с конца изображении, но, чтобы блоки упирались плотно в верхние?
Смысл в том, что мне необходимо получить ленту постов, по ширине должно помещаться столько, сколько поместиться а остальные уходят под верхний ряд (и так далее), но без выравнивания в одну линию а плотно друг к другу? Можно ли обойтись без скриптов а чисто версткой?
3.Плавающий элемент (с float left или right) в «Margin-colloapse» не участвует, т.е. не делится с соседними элементами своими отступами.
самый лучший урок в интернете! Спасибо автору статьи!
Спасибо, хороший урок, но я бы порекомендовал комплексное обучение по урокам Дмитрия Охрименко ( CSS+HTML ) — http://itvdn.com/ru/video/html5-and-css3
Подскажите пожалуйста, почему при элементы с float:(left,right) не имеют высоты, если их «засунуть» в блочный элемент.
Что делает правило CSS «clear: both»?
что делает следующее правило CSS:
и зачем нам его использовать?
5 ответов
я не буду объяснять, как здесь работают поплавки (подробно), так как этот вопрос обычно фокусируется на зачем использовать clear: both; и что значит clear: both; именно.
я буду держать этот ответ простым и по существу, и объясню вам графически, почему clear: both; требуется или что он делает.
вообще конструкторы плавают элементы, левый или к праву, которое создает пустой космос на другой стороне которая позволяет другим элементам принять вверх оставшееся пространство.
почему они плавают элементов?
элементы плавают, когда дизайнеру нужны 2 элемента уровня блока бок о бок. Например, скажем, мы хотим создать базовый веб-сайт, который имеет макет, как показано ниже.
объяснение:
у меня есть базовый макет, Заголовок 1, 1 боковая панель, 1 и 1 в футере.
примечание: по умолчанию, элемент уровня блока занимает документ 100% ширина, но когда плавал влево или вправо, он будет изменять размер в соответствии с содержание он держит.
Итак, как вы заметили, левый плавал div оставляет пространство справа неиспользованным, что позволит div после этого переместиться в оставшееся пространство.
хорошо, так вот как ведут себя элементы уровня блока при плавании влево или вправо, так почему же clear: both; требуются и почему?
так что если вы заметите в демо-макете-в случае, если вы забыли, здесь это..
я поплыл aside и section элементы слева, поэтому предположим сценарий, где у нас есть пул, где header твердая земля, aside и section плавают в бассейне и подвал снова твердая земля, что-то вроде этот..
таким образом, синяя вода понятия не имеет, какова площадь плавающих элементов, они могут быть больше, чем бассейн или меньше, поэтому здесь возникает общая проблема, которая беспокоит 90% начинающих CSS: почему фон элемента контейнера не растягивается, когда он содержит плавающие элементы. Это потому, что элемент container является бассейн здесь бассейн понятия не имеет, сколько объектов плавает, или какая длина или ширина плавающих элементов есть, поэтому она просто не будет растягиваться.
(см. [Clearfix] раздел этого ответа для аккуратного способа сделать это. Я использую пустой div пример намеренно для объяснения цель)
я привел 3 примера выше, 1-й-это обычный поток документов, где red фон будет отображаться так, как ожидалось, так как контейнер не содержит плавающих объектов.
во втором примере, когда объект перемещается влево, элемент контейнера (пул) не будет знать размеры перемещаемых элементов и, следовательно, не будет растягиваться до высоты перемещаемых элементов.
другая причина clear: both; используется для предотвращения сдвига элемента вверх в оставшемся пространстве.
скажем, вы хотите 2 элемента бок о бок и еще один элемент под ними. Таким образом, вы будете плавать 2 элемента влево, и вы хотите, чтобы другой ниже них.
Пример 1
Пример 2
последнее, но не менее важное, footer тег будет отображаться после плавающих элементов, как я использовал clear класс перед объявлением моего footer Теги, что гарантирует, что все плавающие элементы (слева/справа) очищаются до этой точки.
Clearfix
приходя к clearfix, который связан с поплавками. Как уже указано @Elky, то, как мы очищаем эти поплавки, не является чистым способом сделать это, поскольку мы используем пустой div элемент, который является не div элемент предназначен для. Следовательно, здесь идет clearfix.
подумайте об этом как о виртуальном элементе, который создаст пустой элемент для вас прежде чем закончится родительский элемент. Это само очистит ваш элемент оболочки, удерживающий плавающие элементы. Этот элемент не будет существовать в вашем DOM буквально, но будет выполнять эту работу.
чтобы самостоятельно очистить любой элемент обертки, имеющий плавающие элементы, мы можем использовать
так что, если вы видите, он отображается после плавающего ребенка div где мы очищаем поплавки, которые не что иное, как эквивалент пустой div элемент clear: both; свойство, которое мы используем для этого тоже. Теперь почему?—48—> и content из этой области ответов, но вы можете узнать больше о псевдо элемент здесь.
обратите внимание, что это также будет работать в IE8, как ИЕ8 поддерживает :after псевдо.
Оригинальный Ответ:
большинство разработчиков плавают свой контент влево или вправо на своих страницах, вероятно, divs держит логотип, боковую панель, контент и т. д., эти divs плавают влево или вправо, оставляя остальную часть пространства неиспользованной, и, следовательно, если вы разместите другие контейнеры, он тоже будет плавать в оставшемся пространстве, поэтому, чтобы предотвратить это clear: both; используется, он очищает все элементы, плавающие слева или право.
демонстрация:
Поток документа. Свойства float и clear
В данном уроке мы расскажем о весьма важной теме, а именно о потоке HTML-документа, а также о способах управления им с помощью CSS-свойств float и clear.
Последовательность отображения элементов HTML
По умолчанию HTML-документ формируется сверху вниз, от верхнего края окна браузера по направлению к нижнему краю. Такова и очередность появления элементов веб-страницы. Порядок вывода называется потоком документа.
На скриншоте ниже — пример стандартного порядка вывода элементов:
В CSS существует несколько инструментов для управления этим потоком. Например, вы можете задавать обтекание элементов, а также вытаскивать их из общего потока. Об одном из этих инструментов — свойстве float — пойдет речь далее.
CSS float
Элемент, к которому применено свойство float, прижимается к левому или к правому краю родительского элемента (в зависимости от заданного значения), а все элементы, которые расположены ниже, поднимаются и словно обтекают данный элемент. Для лучшего понимания представьте себе камень, который обтекает вода. Собственно, именно поэтому такие элементы еще называют «плавающими».
Данное свойство широко применяется в верстке, поэтому очень важно понять его работу. Float используется для создания макетов с несколькими колонками, навигационных меню, галерей и многого другого.
Давайте рассмотрим значения, которые может принимать свойство float. Их всего три:
Как уже упоминалось, элемент со свойством float прижимается к левой либо правой стороне родительского элемента. Это может быть как основной контейнер веб-страницы, так и небольшой блок, скажем, сайдбар.
Применять данное свойство можно как к строчным, так и к блочным элементам. Но поскольку блочный элемент по умолчанию занимает всю ширину контейнера, то при использовании float с блоком рекомендуется задать ему ширину width и таким образом оставить место для содержимого, которое должно обходить элемент. Иными словами, необходимо дать воде возможность обтекать камень, и не перекрывать поток.
Ниже показан наглядный пример работы свойства float со значениями left и right :
Отмена обтекания: свойство clear
В верстке практически всегда существует необходимость сбросить обтекание после определенного элемента. Например, в случае, когда основной блок веб-страницы обтекается боковой колонкой (сайдбаром), скорее всего, нам понадобится отменить обтекание после сайдбара. Ведь это определенно не последний элемент на странице, и, как минимум, есть еще футер — нижняя часть страницы, «подвал», который должен располагаться внизу, никуда не съезжать и ничего не обтекать.
Сейчас на скриншоте обтекание после сайдбара не отменено, и блок-футер ведет себя странным образом, пытаясь обтекать элемент выше (но ничего не выходит, поскольку ширина как минимум одного элемента этого сделать не позволяет — элемент «застряет»):
Как сделать сброс обтекания? В этом нам поможет свойство clear и его значения:
Воспользуемся полученными знаниями и зададим нашему футеру свойство clear:both :
Поддержка браузерами
Свойства float и clear поддерживаются всеми использующимися браузерами, включая IE6 и IE7.
#4 — Структура сайта — свойства CSS float и clear.
Приветствуем вас на четвертом видеоуроке курса по основам CSS. Наш прошлый урок ознаменовался для вас замечательным событием: вы сверстали свой первый сайт и отцентрировали его содержимое. Сегодня мы продолжим ваше знакомство с возможностями оформления ваших веб-страничек. Автор видеоурока поведает вам о таком загадочном свойстве CSS, как float.
Загадочное свойство CSS float
В CSS float — это свойство, которое определяет, по какой стороне веб-странички будет выравниваться элемент и по какой стороне другие элементы будут его обтекать, т. е. это свойство отвечает за позиционирование элементов. Свойство это имеет свои положительные и отрицательные черты.
Чтобы понять, как работает в CSS float, на видеоуроке вам будет предложено сделать классическую разметку сайта, используя теги HTML5. Разметка эта будет включать в себя header, content, sidebar (его мы разметим тегом ) и, конечно же, footer.
Для разметки автор видеоурока использует очень удобный инструмент, значительно облегчающий труд разработчика, — Emmet.
Для того чтобы sidebar расположился слева, а content — справа, мы и будем в файле стилей использовать наше загадочное свойство CSS float.
.wrap <
width: 960px;
margin: 0 auto;
>
.content <
width: 80%;
float: left;
>
aside <
width: 20%;
float: left;
>
Отрицательное качество свойства CSS float
В процессе реализации у вас проявится отрицательное качество свойства CSS float. Высота родительского элемента «схлопнется», и footer поднимется вверх, как бы заплывет под элементы со свойством CSS float. Существует несколько современных решений этой проблемы, но автор видеоурока предлагает следующее: задать элементу footer свойство CSS clear со значением both.
Свойство CSS clear устанавливает, с какой стороны элемента запрещено его обтекание другими элементами: right — справа, left — слева, both — со всех сторон.
Таким образом, данный видеоурок на практических примерах научит вас применять свойства CSS float и clear.
Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш Loftblog.
What does the CSS rule «clear: both» do?
What does the following CSS rule do:
And why do we need to use it?
5 Answers 5
I won’t be explaining how the floats work here (in detail), as this question generally focuses on Why use clear: both; OR what does clear: both; exactly do.
I’ll keep this answer simple, and to the point, and will explain to you graphically why clear: both; is required or what it does.
Generally designers float the elements, left or to the right, which creates an empty space on the other side which allows other elements to take up the remaining space.
Why do they float elements?
Elements are floated when the designer needs 2 block level elements side by side. For example say we want to design a basic website which has a layout like below.
Explanation:
I have a basic layout, 1 header, 1 side bar, 1 content area and 1 footer.
Note: By default, block level element takes up document 100% width, but when floated left or right, it will resize according to the content it holds.
So as you note, the left floated div leaves the space to its right unused, which will allow the div after it to shift in the remaining space.
Ok, so this is how block level elements behave when floated left or right, so now why is clear: both; required and why?
I’ve floated aside and section elements to the left, so assume a scenario, where we have a pool, where header is solid land, aside and section are floating in the pool and footer is solid land again, something like this..
So the blue water has no idea what the area of the floated elements are, they can be bigger than the pool or smaller, so here comes a common issue which troubles 90% of CSS beginners: why the background of a container element is not stretched when it holds floated elements. It’s because the container element is a POOL here and the POOL has no idea how many objects are floating, or what the length or breadth of the floated elements are, so it simply won’t stretch.
(Refer [Clearfix] section of this answer for neat way to do this. I am using an empty div example intentionally for explanation purpose)
I’ve provided 3 examples above, 1st is the normal document flow where red background will just render as expected since the container doesn’t hold any floated objects.
In the second example, when the object is floated to left, the container element (POOL) won’t know the dimensions of the floated elements and hence it won’t stretch to the floated elements height.
Another reason the clear: both; is used is to prevent the element to shift up in the remaining space.
Say you want 2 elements side by side and another element below them. So you will float 2 elements to left and you want the other below them.
1st Example
2nd Example
Last but not the least, the footer tag will be rendered after floated elements as I’ve used the clear class before declaring my footer tags, which ensures that all the floated elements (left/right) are cleared up to that point.
Clearfix
Coming to clearfix which is related to floats. As already specified by @Elky, the way we are clearing these floats is not a clean way to do it as we are using an empty div element which is not a div element is meant for. Hence here comes the clearfix.
Think of it as a virtual element which will create an empty element for you before your parent element ends. This will self clear your wrapper element holding floated elements. This element won’t exist in your DOM literally but will do the job.
To self clear any wrapper element having floated elements, we can use
So if you see, it is rendered after the floated child div where we clear the floats which is nothing but equivalent to have an empty div element with clear: both; property which we are using for this too. Now why display: table; and content is out of this answers scope but you can learn more about pseudo element here.
Note that this will also work in IE8 as IE8 supports :after pseudo.
Original Answer:
Most of the developers float their content left or right on their pages, probably divs holding logo, sidebar, content etc., these divs are floated left or right, leaving the rest of the space unused and hence if you place other containers, it will float too in the remaining space, so in order to prevent that clear: both; is used, it clears all the elements floated left or right.