Как работает свойство CSS float left и float right. Float'омания: разъяснение как работает css свойство float

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

• Элемент «сплывает» и прижимается к левому (если float: left) или правому (float: right) краю родительского элемента или элемента которому тоже задано значение float
• Если элемент из-за ширины родительского блока не может встать в один ряд с другим элементом, он будет сдвинут вниз до того момента пока ему не хватит места
• Другие блочные элементы для которых значение float не задано ведут себя так, как будто элемента с float нет на странице (элемент «сплыл»). Строки «знают» что элемент всплыл и обтекают его
• Ширина блока, для которого задано значение float — определяется по содержимому.

Рассмотрим пример. Расскоментируйте свойство float: left внутри CSS. Посмотрите на результат.

Замените float:left на float: right.

Свойство float удобен для обеспечения обтекания картинок текстом. Рассмотрите пример:

Добавьте комментарий в строку CSS файла к свойству float: left. Просмотрите как изменится верстка страницы. Замените float: left на float:right.

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

Пусть внутрь элемента one помещен элемент two. По-умолчанию, высота one растянется по содержимому. Как только мы к элементу two применим свойство float, он всплывает, и родительский элемент one не будет знать что two существует. Если содержимого у two нет, то его высота равна нулю. Такое поведение называется «схлопыванием». Чтобы предотвратить схлопывание родителя ему задают либо свойство min-height — минимальная высота, либо применяют способ: добавляют еще однин блок, для которого задают свойство:

1

Данный блок не виден на странице, но свойство clear:both снимает обтекание элементов и растягивает родителя на высоту содержимого.

Снимите комментарий свойству float:left в CSS. Посмотрите как ведет себя родительский элемент:

Рассмотрите пример с применением clear: both

Итак вы ознакомились с основными свойстами float. Давайте применим знания на практике.

Выполнить

Задание 1. Добавьте изображениям классы. В классах укажите свойство float:left. Изучите как изменится вывод страницы.

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

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

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

×

Значения

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 (Черновик спецификации ) - первая черновая версия стандарта.

×

Свойство 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 я переместил после текста

Наш результат не тот, который ожидался. Наше изображение передвинулось вправо, но уже не находится в верхнем углу как мы хотим, а упало вниз под параграф; даже хуже, оно торчит из нижней части нашего родительского элемента #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 отображается неправильно, я решил написать эту заметку, которая объяснила бы типичные ситуации, с которыми сталкивается начинающий верстальщик, а так же для того, чтобы в следующий раз просто дать ссылку на эту статью.

Disclaimer

Я не профессиональный верстальщик, хотя по роду моей деятельности мне пришлось сверстать не один десяток сайтов. У меня есть друзья, которые учатся верстать и я им хочу помочь. Скорее всего они есть и у вас. Цель этой статьи не рассказать что-то новое, а рассказать о старом с точки зрения наиболее часто возникающих у начинающих верстальщиков проблем. Я не претендую на абсолютную истину своих слов, и я буду только рад, если вы меня поправите и дополните.

Свойства элемента с float, которые нужно всегда держать в голове

если оно установлено в значение left или right

• Элемент отображается как блочный , так словно ему установлено свойство display: block;
• Элемент по ширине сжимается до размеров содержимого, если для элемента явно не установлена ширина width;
• Элемент прилипает к левому (left) или правому краю (right);
• Все остальное содержимое страницы, идущее в HTML коде после элемента с float, обтекает его;

Жизненный случай #1

У меня есть два блока, я применил к одному из блоков float: right, он выровнялся по правому краю, но все равно остался под первым. Пример как это выглядит.

Причина

Если так произошло, значит, вы применили float не к первому, а ко второму блоку. В силу того, что плавающий (тот, который с float) элемент обтекают только те элементы, которые идут в HTML коде после него, первый блок его обтекать не будет.

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

Так же всё содержимое сайта, которое идет в HTML коде после плавающих элементов, обтекает их, что часто приводит к неожиданному эффекту.

Решение

Решение #1. Явно задать высоту контейнера . В тех случаях, когда известно какими должны быть размеры контейнера, это самое простое решение.

Решение #2. Добавить пустой блок с clear: both . Добавление подобного элемента отчищает «плавучесть» блоков и заставляет контейнер растягиваться на всю высоту. Семантически это не самое лучшее решение, так как вводит лишний элемент разметки.

Решение #3. Применить свойство overflow: auto (или hidden) к контейнеру . Заставляет контейнер заново рассчитать высоту и изменить ее так, чтобы включать плавающие элементы, иначе ему бы пришлось добавить полосу прокрутки или скрыть их. Впрочем, иногда это случается, поэтому будьте осторожны.

UPD
Так же читайте от как продолжение обсуждения свойства float.

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

Что такое "float"?

Float это свойство CSS позиционирования. Что бы понять его суть и происхождение нужно обратить своё внимание на печатный дизайн. В печатных макетах изображение может быть расположено так, что текст обтекает его. Обычно это и называется "обтекание текстом ".

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

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

Установка свойства float для элементов с помощью CSS выглядит следующим образом:

#sidebar { float: right; }

Есть четыре допустимых значения для свойства float - left , right , none , inherit . Первые два, left и right указывают направления расположения - слева и справа, соответственно. None - значение по умолчанию, указывает что элемент не плавающий и inherit указывающий элементу наследовать значение свойства float от родительского элемента.

Для чего используется float?

Помимо простого примера обтекания текста вокруг изображения, float можно использовать для создания веб макетов.

Float , так же удобно использовать для небольших элементов макета. К примеру, возьмём этот небольшой фрагмент веб страницы. Если мы установим свойство float для небольшого изображения аватара, то когда изменится размер изображения обтекание измениться в соответствии с новыми размерами изображения:

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

Сброс обтекания

Clear родственное свойство свойству float . Элемент с установленным свойством clear не будет двигаться вверх обтекая элемент с установленным свойством float , но будет смещаться вниз игнорируя обтекание. И снова иллюстрация, которая объяснит всё без лишних слов.

В приведённом выше примере, боковая панель "плавала" справа от блока основного контента. "Подвал" переместился в свободное место под боковой панелью, обтекая блок с основным контентом. Для решения этой проблемы необходимо указать значение свойства clear:both "подвала" для "очищения" обтекания обоих столбцов.

#footer { clear: both; }

Свойство clear имеет четыре значения. Both используется для сброса обтекания в обоих направлениях. Left и Right используются для сброса одного направления - левого или правого, соответственно. None - значение по умолчанию. Inherit может быть пятым значением, но оно на удивление не поддерживается Internet Explorer . Сброс только левого или правого обтекания встречается довольно редко, но имеет практическую пользу.

Великий коллапс

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

Но альтернатива такого коллапса ещё хуже. Рассмотрим следующий сценарий:

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

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

Техники отмены обтекания

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

Метод пустого блока.

Это в буквальном смысле пустой блок.

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

Метод переполнения.

Основан на указании CSS свойства overflow для родительского элемента. Если это свойство установлено в auto или hidden для родительского элемента, то он будет расширятся вслед за плавающим элементом эффективно сбрасывая обтекание его для последующих элементов. Этот метод может быть семантически красив, так как не требует дополнительных элементов. Однако, как вы видите мы добавили новый div для использования этого метода, что эквивалентно использованию не семантического пустого блока и менее гибко. Так же следует помнить, что свойство overflow предназначено не для отключения обтекания. Будьте осторожны что бы случайно не скрыть контент или вызвать нежелательные полосы прокрутки.

Метод лёгкой очистки.

Использует CSS псевдо-селектор (:after ) для удаления обтекания. Вместо использования свойства overflow для родительского элемента установите дополнительный класс для него, например "clearfix" и используйте следующий стиль CSS :

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

Здесь используется маленький фрагмент контента скрытый от просмотра, расположенный после родительского элемента, который сбрасывает обтекание. Это метод не является полноценным, так как для поддержки старых браузеров его нужно доробатывать.

Разные ситуации требуют разных методов сброса обтекания. Возьмём для примера сетку разнотипных блоков.

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

Проблемы с плавающими элементами

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

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

Быстрое решение проблемы : используйте overflow: hidden; для обрезания излишков.

Баг с двойными полями (double margin bug) - ещё одна вещь о которой необходимо помнить работая с IE6 . Этот баг выражается в том, что если поле находится с той же стороны куда ориентирован float , поле удваивается. Например:

Мы получим слева поле в 40 px ., вместо 20 px .

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

3х пиксельный толчок (3px Jog) . Суть этого бага в том, что текст расположенный рядом с плавающим элементом странным образом смещается на три пикселя, как будто под воздействие силового поля расположенного вокруг плавающего элемента. Быстрое решение проблемы : установить ширину и высоту пострадавшего текста.

В IE7 появляется Баг нижнего отступа (bottom margin bug) , когда родительский элемент является плавающим и его потомок расположенный внутри него тоже плавающий элемент. Нижнее поле (margin-bottom ) потомка игнорируется, элементом предком. Быстрое решение проблемы : Использовать нижнее поле (padding-bottom ) в родительском элементе, вместо нижнего отступа (margin-bottom ) потомка.