Float и clear — CSS свойства для плавающих элементов при блочной верстке. Всё о свойстве float

Свойство Float это значимый и мощный актив для web-developer-ов работающих с HTML и CSS. C другой стороны, он может вызывать одно разочарование и путаницу если вы не до конца понимаете как это свойство работает.

Перевод статьи CSS Floats 101 . Оригинал alistapart.com

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

Мы видим float каждый день в мире печати, когда рассматриваем статью в журнале с изображением расположенным слева или справа и текстом красиво расположенным вокруг него. В мире HTML/CSS, текст будет обвертывать изображение в зависимости от свойства float, которое применяется к этому изображению. Использование свойства float к изображению, это все лишь один из многих примеров. Еще как пример, с помощью свойства float, мы можем очень легко сделать популярный двухколоночный макет. А на самом деле, вы можете применять свойство float к любому элементу в вашем HTML. Изучив и поняв применение свойства float, вместе с свойством position , вы сможете комфортно и уверенно себя чувствовать при создании любого макета.

Определение float

Давайте начнем с определения, что такое float .

Float это условно коробка, которая двигается вправо или влево по текущей линии. Наиболее интересная характеристика float в том, что контент может обтекать вдоль его стороны. При применении свойства float: left, контент будет обтекать коробку вниз с правой стороны и аналогично при float: right - вниз с левой стороны.

Свойство float имеет 4 значения, которые мы можем применять: left , right , inherint и none . Каждое значение довольно понятно. К примеру, если вы используете float: left к элементу, то он переместится в крайнюю слева границу относительно своего родительского элемента. И, если вы зададите float: right , то элемент аналогично переместится в право. Значение ihnerit говорит элементу унаследовать свойство от своего родительского элемента. И последнее значение none является значением по умолчанию и говорит не применять свойство float к данному элементу.

#container { width: 960px; margin: 0 auto; } #content { float: left; width: 660px; background: #fff; } #navigation { float: right; width: 300px; background: #eee; } #footer { clear: both; background: #aaa; padding: 10px; }

Наш #footer прилип под блоком #navigation . Это произошло, так как под блоком #navigation есть место для #footer и для нормального потока расположения блоков это правильное поведение. Но, это абсолютно не то что нам нужно, не правда ли? Предполагаю вы уже видите взаимосвязь между float и clear и понимаете как они дополняют друг друга.

Если у вас одержимо-маниакальное расстройство, как у меня, вы могли заметить в Пример F разные высоты столбцов #content и #navigation ; есть несколько способов решения, но это выходит за рамки данной статьи. Настоятельно рекомендую почитать Faux Columns автора Dan Cederholm чтобы изучить как сделать одинаковой высоты блоки, в не зависимости от контента внутри.

Float first

До сих пор мы видели некоторые довольно простые примеры, которые не создают много головной боли. Есть, однако, несколько подводных камней, которые нужно учитывать при использовании свойства float . Удивительно, но один из самых больших подводных камней связан не с CSS, а больше с HTML. Помещая ваш floated элемент внутрь вашего HTML может привезти к разным результатам. Взгляните на Пример H .

Здесь мы имеем маленький блок, который имеет картинку с свойством float:right и текстом окружающим ее. Наш CSS выглядит так:

#container { width: 280px; margin: 0 auto; padding: 10px; background: #aaa; border: 1px solid #999; } img { float: right; }

Наш родительский элемент #container имеет узкую ширину и удерживает наш floated элемент (изображение) внутри своих границ. Наш HTML код выглядит так:

Этот пример дает нам желаемый результат, но что если возьмем и переставим местами некоторые элементы в HTML? В Примере I я переместил после текста

This is some text contained within a small-ish box. I"m using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.

Наш результат не тот, который ожидался. Наше изображение передвинулось вправо, но уже не находится в верхнем углу как мы хотим, а упало вниз под параграф; даже хуже, оно торчит из нижней части нашего родительского элемента #container . Что происходит?

Во-первых. Мое правило, которое я нашел для себя это - сначала float элементы. В моем HTML, я практически всегда добавляю floated элементы в начале разметки, и перед любимы не-floated элементам с которым мои floated будут взаимодействовать, такими как параграф в примере выше. В большинстве случаев это дает положительный результат

Во-вторых. Причина по которой изображение кажется торчащим внизу из нашего блока #container, связана с чем-то под названием collapsing (деформация). Давайте поговорим про collapsing и варианты решения.

Collapsing

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

Теперь давайте попробуем исправить это с помощью CSS вместо добавления дополнительной HTML разметки в наш документ, как мы это делали раньше. Существует метод, которые позволяет родительскому элементу "применить" свойство clear после всех floated элементов. Для этого используется CSS свойство overflow со значением hidden . Примите во внимание что свойство overflow не было предназначено для такого использования и может стать причиной возникновения некоторых проблем, таких как скрытие контента или появление нежелательного скроллбара. Для нашего примера, однако, мы все же применим свойство overflow: hidden к нашему родительскому элементу #container:

#container { overflow: hidden; width: 260px; margin: 0 auto; padding: 10px 0 10px 10px; background: #aaa; border: 1px solid #999; }

И напоследок, Eric Meyer объясняет третий вариант решения данной проблемы в своей статье Containing Floats . В соответствии CSS Spec 2.1:

элемент со свойством float будет расширять свои границы для floated элементов находящихся внутри.

Таким образом, применяя свойство float к #container , наш контейнер будет содержать в себе наше изображение и параграф, аналогично описанным выше методам.

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

Заключение

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

Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none , элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.

Краткая информация

Обозначения

Значения

left Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне. right Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне. none Обтекание элемента не задаётся.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

img { float: none ; }

Пример

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

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства float

Объектная модель

Объект .style.cssFloat

Примечание

В браузере Internet Explorer 6 наблюдается ошибка с удвоением значения левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента. Также в этом браузере добавляется отступ 3px (так называемый «трёхпиксельный баг») в направлении, заданном значением float .

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации ) - первая черновая версия стандарта.

Пару лет назад, когда разработчики впервые начали переходить к HTML-разметке без таблиц, CSS свойство float внезапно взяло на себя очень важную роль. Причина того, что свойство float стало так распространено, состояла в том, что по умолчанию, блочные элементы не выстраивались в линию рядом друг с другом в формате на основе столбца. Так как столбцы необходимы фактически в каждой схеме CSS, к этому свойству начали привыкать - и даже злоупотреблять им.

Свойство float в CSS , позволяет разработчику включать подобные таблице столбцы в разметку HTML без использования таблиц. Если бы не свойство float , то схемы размещения CSS не были бы возможны, кроме использования абсолютного и относительного позиционирования - которые были бы неаккуратными и сделали бы схему разметки неудобной в сопровождении.

В этой статье мы расскажем, что такое свойство float и как оно влияет на элементы в специфических контекстах . Мы также обратим внимание на некоторые из различий, которые могут возникнуть в связи с этим свойством в наиболее часто используемых браузерах. Наконец, мы продемонстрируем несколько практических применений свойства float . Это должно обеспечить также всестороннее и тщательное обсуждение этого свойства и его влияние на развитие CSS.

Определение и синтаксис CSS-свойства Float

Цель свойства float состоит в том, чтобы, вытолкнуть блочный элемент влево или вправо, взяв его из потока документа. Это позволяет естественным образом текущему информационному содержанию обвалакиваться вокруг плавающего элемента. Эта концепция является аналогичной той, которую вы видите каждый день в печатной литературе, где фотографии и другие графические элементы, выровненные по какой либо стороне, а информационное наполнение (обычно текст) течет естественно вокруг элемента выровненного вокруг левого или правого края.

На изображении выше раздел “Читатели сайта ”.net magazine с 3-мя фотографиями читателей, которые выровнены по левому краю в своих столбцах с обертыванием текста вокруг изображений. Такова — основная идея, лежащая в основе свойства float в схемах размещения CSS, и она демонстрирует один из способов, который использован в табличном дизайне.

Эффективность использования float в многоколонной верстке была объяснена Douglas Bowman в 2004 в его классической презентации No More Tables :

Bowman объяснил принципы, лежащие в верстке без таблиц, используя старый сайт Microsoft в качестве образца. Float были заметно использованы в его ложной перестройке разметки Microsoft.

Синтаксис

Свойство Float может принимать одно из 4 значений: влево (left), вправо(right), без выравнивания (none) и наследованное (inherit). Это объявляется, как показано в коде ниже:

#sidebar { float: left; }

Наиболее часто используемые значения это влево и вправо. Значение none или первоначальное значение float для какого-либо элемента HTML-страницы являются значением по умолчанию. Значение inherit (наследовать), к которому может быть применено почти к каждому свойству CSS, не работает в версиях Internet Explorer, включая 7.

Свойство float не требует применения любого другого свойства для элемента с float, однако, чтобы функционировать правильно, float будет работать более эффективно при определенных обстоятельствах.

Как правило, плавающий элемент должен иметь явно установленную ширину (если это не replaced element , например изображение). Это гарантирует, что float ведет себя как ожидалось и помогает избежать проблем в некоторых браузерах.

#sidebar { float: left; width: 350px; }

Особенности плавающих элементов

Ниже приводится список поведение плавающих элементов, согласно спецификации CSS2:

left-floated блок будет смещен влево до его левого края (или границы края, если край отсутствует) касается или края содержания блока, или края другого floated блока

Если размер floated блока превышает доступное горизонтальное пространство, то floated блок будет сдвинут вниз

Non-positioned, non-floated блочные элементы действуют, как плавающие элементы, т.е. находится вне потока документа

Края floated блока не совпадут с краями смежных блоков

Корневой элемент() не может быть floated

Встроенный элемент, тот который floated, преобразуется в элемент блочного типа

Float на практике

Наиболее часто используемым вариантом использования свойства float является плавающее изображение с текстом, обертывающим его. Например:

Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.

Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

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

img { float: left; margin: 0 15px 5px 0; border: solid 1px #bbb; }

Единственное свойство, которое может добиться такого эффекта работы это свойство float. Другие свойства (margin и border) есть там по эстетическим причинам. Другие элементы в блоке (тэги

С текстом в них) не нуждаются ни в каких стилях.

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

This box is floated left

This

Element has a different background color to show that it spans the width of its parent, ignoring the floated element. This inline text, however, wraps around the floated box.

В приведенном выше примере

элемент уровня блока, таким образом он игнорирует floated элемент, охватывающий ширину контейнера (за вычетом padding). Все элементы не floated, блочного типа будут вести себя аналогично.

Текст в абзаце является встроенным, поэтому он обволакивает floated элемент. Floated блоку также предоставляются параметры margin, чтобы сместить его из абзаца, делая его визуально чистым, чтобы элемент абзаца игнорировал floated блок.

Очистка floats

Проблемы расположения с floats обычно решаются использованием CSS свойства clear, которое позволяет вам “убрать” floated элементы с левой или правой или с обеих сторон.

Давайте рассмотрим пример, который часто встречается — нижний колонтитул (footer) обтекает правую сторону 2-ух клоночной разметки:

Left column floated left

Если вы посмотрите на страницу IE6 и IE7, вы не увидите никаких проблем. Левые и правые столбцы на месте, и нижний колонтитул внизу. Но в Firefox, Опере, Safari и Chrome, вы увидеть, что нижний колонтитул (footer) съезжает со своего места. Это вызвано приминением float к столбцам. Это правильное поведение, хотя оно является более проблемным. Чтобы решить эту проблему, мы используем вышеупомянутое clear свойство, относительно нижнего колонтитула:

#footer { clear: both; }

Результат показан ниже:

Left column floated left

Right column also floated left

The clear property will clear only floated elements, so applying clear: both to both columns would not cause the footer to drop down, because the footer is not a floated element.

Свойство clear очистит только floated элементы. Применение clear таково: оба столбца не будут опускать нижний колонтитул, потому что он не floated элемент.

Поэтому пользуйтесь clear на не- floated элементах, и даже иногда на floated элементах, чтобы заставить элементы страницы занять свои отведенные места.

Фиксация Выпадания родителя

Один из самых общих признаков разметки с float, является “выпадение — родителя”. Это продемонстрировано в примере ниже:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Обратите внимание, что основание floated изображения появляется вне своего родителя. Родитель полностью не расширяется, для содержания floated изображение. Это вызвано тем, что мы обсуждали ранее: floated элемент вне естественного потока документа, хотя все элементы блока отображаются, но floated элемента там как бы нет. Это не ошибка CSS, всё в соответствии со спецификациями CSS. Все браузеры делают то же в этом примере. Нужно сказать, что, в этом примере, добавляя ширину контейнера можно предотвратить проблему в IE, но нужно рештиь проблему и для Firefox, Opera, Safari, или Chrome.

Решение 1:Float для контейнера

Самый простой способ решения этой проблемы является float для родительского элемента:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

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

Решение 2: Добавление Дополнительной Разметки

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

XHTML

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

И в результате CSS применяется к новым элементам:

Clearfix { clear: both; }

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

Решение 3: Псевдо-элемент after

:after псевдо-элемент добавляет некий элемент к выполненной странице HTML. Этот метод использовался весьма широко, чтобы решить проблемы float-clearing. Вот как выглядит CSS:

Clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

Класс CSS “clearfix” применяем к любому контейнеру, который имеет дочерние элементы с float и не расширяется, чтобы включить их.

Но этот метод не работает для Internet Explorer до7 версии, поэтому для IE нужно применить один из следующих вариантов:

Clearfix { display: inline-block; } .clearfix { zoom: 1; }

В зависимости от типа проблемы вы имеете дело с одним из двух решений, которые разрешат эту проблему в Internet Explorer. Следует отметить, что свойство zoom не является стандартом свойств Microsoft и поэтому ваш CSS станет не валидным.

Так, как псевдо — элемент:after не работает в IE6/7, получаем немного раздутый и мудрёный код, и требуется дополнительный недопустимый только для IE стиль, поэтому это решение не является лучшим способом, но вероятно, лучшее, из тех, что мы рассматривали до сих пор.

Решение 4: Свойство Overflow

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

Заметьте, что я сказал «почти» во всех браузерах. Это объясняется тем, что он не работает в IE6. Но, во многих случаях, у родительского контейнера будет установленная ширина, которая устраняет проблему в IE6. Если у родительского контейнера нет ширины, Вы можете добавить IE6-единственный стиль со следующим кодом:

// This fix is for IE6 only .clearfix { height: 1%; overflow: visible; }

В IE6, свойство height неправильно рассматривать как min-height, таким образом, это вынуждает контейнер включить свои дочерние элементы. Свойство Overflow затем устанавливается обратно в “visible”, чтобы гарантировать, что содержимое не скрыто или пролистано.

Единственный недостаток в использовании overflow метода (в любом браузере) является возможность того, что содержание элемента будет иметь полосы прокрутки или скроет информационное наполнение. Если есть какие-нибудь элементы с отрицательными margin или с абсолютным позиционированием в родителе, то они будут скрыты, если они выходят за пределы родителя, поэтому этот метод следует использовать осторожно. Нужно также отметить что, если бы у содержащегося элемента была бы указанная height или min-height, то Вы определенно не смогли бы использовать метод overflow.

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

Связанные float ошибки в Internet Explorer

За эти годы имели место многочисленные статьи, опубликованные в сети, обсуждающие общие ошибки, связанные с float в CSS разметке. Все они, что не удивительно, имеют дело с проблемами характерными для Internet Explorer. Ниже, Вы найдете список ссылок на ряд статей, которые обсуждают связанные с float проблемы:

Изменение cвойства float при помощи JavaScript

Чтобы изменить значение CSS в JavaScript, вы должны получить доступ к стилю объекта, преобразовывая намеченное свойство CSS в «Camel case” Например, свойство CSS “margin-left” становится marginLeft, свойство background-color становится BackgroundColor, и так далее. Но со свойством float, всё по другому, потому что слово float уже зарезервированно в JavaScript. Поэтому следующее будет неправильным:

Style . styleFloat = "left" ;

// For all other browsers

myDiv . style . cssFloat = "left" ;

Практическое использование Float

Floats могут быть использованы для решения целого ряда задач в CSS разметке. Некоторые примеры описаны здесь.

2-колонки, фиксированной ширины

3 столбца, Схема размещения Равной высоты

Floated изображение с заголовоком.

Подобно тому, что мы обсуждали ранее в рамках «Float на практике», Max Design описывает, как float изображение с заголовком, позволяет тексту обернуться вокруг него естественно.

Горизонтальная навигация с неупорядоченными списками

Свойство float — ключевой компонент в кодировании основанных на спрайте горизонтальных навигационных панелей. Chris Spooner из Line25 описывается создание Menu of Awesomeness , в котором теги