Что означает float left: Всё о свойстве float | CSS-Tricks по-русски

В веб-дизайне, элементы страницы с установленным свойством float, ведут себя точно также как и изображения в полиграфии, когда текст «обтекает» их. Такие элементы являются частью основного потока веб-страницы. Однако всё обстоит иначе, если элементы используют абсолютное позиционирование. Абсолютно позиционированные элементы удаляются из основного потока страницы, подобно примеру выше, когда в полиграфии текст игнорирует изображения. Такие элементы не влияют на позицию остальных элементов, соприкасаются они или нет.

Установка свойства float происходит следующим образом:

#sidebar {
	float	: right;
}

Всего есть 4 значения для свойства float. Left и right используются для соответствующих направлений. None (по умолчанию) — обеспечивает, что элемент не будет «плавать». И inherit, которое говорит, что поведение должно быть такое же, как и у родительского элемента.

Для чего можно использовать float?

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

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

Такое же расположение объектов может быть достигнуто путём использования позиционирования. Объекту-контейнеру присваивается относительное (relative) позиционирование, а объекту с изображением — абсолютное (absolute). В этом случае аватар не повлияет на положение текста.

Отмена свойства float

Для float, родственное свойство — clear. Любой элемент, у которого установлено свойство clear, не будет поднят вверх, как от него ожидается, а отобразится ниже, после float-элементов. Возможно, пример на картинке объяснит лучше, чем слова.

В примере, сайд-бар прижат к правому краю (float: right;), а его высота меньше, чем область основного контента. Поэтому footer будет поднят выше, поскольку для него хватает высоты и этого требует поведение float. Чтобы исправить ситуацию, ему необходимо установить свойство clear, которое гарантирует, что элемент выведется ниже float-элементов.

#footer {
	clear: both;
}

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

Большой коллапс

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

Такое схлопывание выглядит нелогичным, однако альтернатива ещё хуже. Рассмотрим такой пример:

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

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

Способы отмены float

Если вам известно, что следом после float-элементов, всегда будет выводится какой-либо другой элемент (например футер), то вам достаточно ему установить свойство clear: both;, как в примере выше, и заниматься дальше своими делами. Это идеальный вариант, поскольку он не требует каких-либо хаков, или дополнительных элементов. Конечно не всё в нашей жизни так гладко и бывают случаи когда такого способа не достаточно. Поэтому необходимо иметь несколько дополнительных способов в своём арсенале.

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

Для более лучшего визуального представления было бы неплохо объединить подобные блоки. Например мы хотим, чтобы каждый тип начинался с новой строки, в нашем случае тип элемента определяется цветом. Мы можем использовать метод с overflow или «метод простой очистки», если у каждой группы есть свой элемент-контейнер. Или же мы можем использовать метод пустого div-а между каждой из групп. Три элемента-контейнера, или три пустых div-а, что лучше для вашей задачи — решать вам.

Проблемы с float

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

• «Выталкивание» (pushdown). Возникает когда элемент внутри float-элемента оказывается шире его (обычно это изображения). Большинство браузеров обработает такие элементы вне float-структуры и вёрстка не будет сломана. IE расширит элемент, чтобы изображение влезло, зачастую это ломает дизайн. На картинке представлен пример, как изображение торчит из основного контента и таким образом «выталкивает» сайд-бар вниз. Самый просто способ избежать этого — это проверить что все ваши изображения подходят по ширине. Можно использовать overflow: hidden;, чтобы обрезать выступающую часть.
• Двойной внешний отступ. Ошибка проявляющаяся в IE6, в случае если вы устанавливаете внешний отступ в том же направлении, в котором у вас указан float. В этом случае отступ удваивается. Чтобы исправить это, необходимо установить плавающему (float) элементу свойство display: inline;, не беспокойтесь, элемент по прежнему будет блочным.
• Трёх-пиксельный прыжок (3px Jog). Ошибка, которая проявляется следующим образом: текст, который расположен рядом с float-элементом неожиданно съезжает на 3 пикселя. Чтобы избежать этого, необходимо установить ширину или высоту пострадавшему тексту.
• В IE7 существует Ошибка нижнего внешнего отступа (Bottom Margin Bug) — возникает когда элемент с установленным свойством float, содержит в себе ещё один float-элемент. В таких случаях, нижний внешний отступ дочернего элемента игнорируется. Для обхода этой проблемы необходимо использовать внутренний отступ родительского элемента, вместо внешнего отступа дочернего.

Альтернативы float

Если вам необходимо обтекание картинки текстом, то альтернатив нет. Но для макета страницы, определённо есть выбор. Существуют очень интересные подходы, в которых комбинируется гибкость float с мощью абсолютного позиционирования. В CSS3 есть, так называемый, Модуль разметки шаблона (Template Layout Module), который в будущем предоставит достойную альтернативу float.

float — CSS: Каскадные таблицы стилей

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

Плавающий элемент — это элемент, в котором вычисленное значение float не равно none .

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

Примечание: Если вы ссылаетесь на это свойство из JavaScript как на член объекта HTMLElement. style , современные браузеры поддерживают float , но в более старых браузерах вы должны писать его как cssFloat . Это было исключением из правила, согласно которому имя члена DOM представляет собой имя CSS, разделенное тире, в верблюжьем регистре (поскольку «float» является зарезервированным словом в JavaScript, как видно из необходимости экранировать «class» как «className» и экранировать «for» как «htmlFor»).

 /* Значения ключевых слов */
плыть налево;
поплавок: справа;
поплавок: нет;
поплавок: встроенный старт;
поплавок: встроенный конец;
/* Глобальные значения */
поплавок: наследовать;
поплавок: начальный;
поплавок: вернуться;
float: обратный слой;
поплавок: не установлен;
 

Свойство float указывается как одно ключевое слово, выбранное из списка значений ниже.

Значения

слева

Элемент должен плавать слева от содержащего его блока.

справа

Элемент должен плавать справа от содержащего его блока.

нет

Элемент не должен плавать.

встроенный пуск

Элемент должен плавать на начальной стороне содержащего его блока. Это левая сторона с сценариями ltr и правая сторона с сценариями rtl .

рядный конец

Элемент должен располагаться на конце содержащего его блока. Это правая сторона с сценариями ltr , а левая сторона с сценариями rtl .

 float = 
 block-start | 
 конец блока | 
 встроенный старт | 
 встроенный конец | 
 защелкивающийся блок | 
 <привязка-блок()> | 
 встроенный | 
 <встроенная привязка()> | 
 осталось | 
 справа | 
 топ | 
 дно | 
 нет | 
 сноска 
 "> = 
 snap-block( <длина>, [начало | конец | рядом]?) 
 
 "> = 
 snap-inline(  , [ слева | справа | рядом ]? ) 
 

Как позиционируются плавающие элементы

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

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

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

HTML

 <раздел>
  <дел>1
  <дел>2
  <дел>3
  <р>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Тристик Морби
    sapien acerat tincidunt, sit amet dignissim lectus vulputate. ID Донец
    якулис велит. Aliquam vel malesuada erat. Present non magna ac massa
    aliquet tincidunt vel in massa. Phasellus feugiat est vel leo finibus
    конге.
  


 

УС

 раздел {
  box-sizing: граница-коробка;
  граница: 1px сплошной синий;
  ширина: 100%;
  плыть налево;
}
дел {
  поле: 5px;
  ширина: 50 пикселей;
  высота: 150 пикселей;
}
.левый {
  плыть налево;
  фон: розовый;
}
.верно {
  поплавок: справа;
  фон: голубой;
}
 

Результат

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

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

Спецификация
Спецификация каскадного стиля уровня 2 (CSS 2,2).

Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

• Контекст форматирования блока
• Используйте clear , чтобы заставить элемент перемещаться ниже плавающего элемента.

Обнаружили проблему с содержанием этой страницы?

• Отредактируйте страницу на GitHub.
• Сообщить о проблеме с содержимым.
• Посмотреть исходный код на GitHub.

Хотите принять больше участия?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 23 февраля 2023 г. участниками MDN.

Тайна свойства CSS Float — Smashing Magazine

• 14 минут чтения
• Кодирование, CSS, Essentials
• Поделиться в Twitter, LinkedIn

Об авторе

Луис — разработчик интерфейса, писатель и писатель из Торонто, Канада. Он курирует информационные бюллетени Web Tools Weekly и Tech Productivity, а также ведет блоги о… Больше о Louis ↬

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

Что такое плавающее свойство CSS?

Свойство float CSS позволяет разработчику включать табличные столбцы в макет HTML без использования таблиц.

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

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

Больше после прыжка! Продолжить чтение ниже ↓

Определение и синтаксис

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

 #боковая панель {
  плыть налево;
}
 

 #боковая панель {
  плыть налево;
  ширина: 350 пикселей;
} 

 img {
  плыть налево;
  поля: 0 15px 5px 0;
  граница: сплошная 1px #bbb;
} 

 #footer {
  ясно: оба;
} 

 


Pellentesque обитатель 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.
  <дел>

 

 . clearfix {
  ясно: оба;
} 

 .clearfix: после {
    содержание: ".";
    дисплей: блок;
    высота: 0;
    ясно: оба;
    видимость: скрытая;
} 

 . clearfix {
  отображение: встроенный блок;
}
.clearfix {
  масштаб: 1;
} 

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

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

Решение 4. Свойство переполнения

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

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

 // Это исправление предназначено только для IE6
.clearfix {
  высота: 1%;
  переполнение: видимое;
} 

В IE6 свойство height неправильно обрабатывается как min-height , поэтому это вынуждает контейнер заключать свои дочерние элементы. Затем свойство overflow снова устанавливается на «видимый», чтобы гарантировать, что содержимое не будет скрыто или прокручено.

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

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

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

• The Internet Explorer Guillotine Bug
• The IE5/6 Doubled Float-Margin Bug
• IE7 Bottom Margin Bug
• The IE Escaping Floats Bug
• The IE6 Peekaboo Bug
• The IE6 «Ghost Text» Bug
• The Проблема с расширяющимся блоком IE6
• Трехпиксельный разрыв IE6

Изменение свойства Float с помощью JavaScript

Чтобы изменить значение CSS в JavaScript, вы должны получить доступ к объекту в стиле , преобразовав предполагаемое свойство CSS в "camel case" . Например, свойство CSS "margin-left" становится равным 9.0004 marginLeft ; свойство background-color становится backgroundColor и так далее. Но со свойством float все по-другому, потому что float уже является зарезервированным словом в JavaScript. Таким образом, следующее будет неверным:

 myDiv.style.float = "left"; 

Вместо этого вы должны использовать один из следующих:

 // Для Internet Explorer
myDiv.style.styleFloat = "слева";
// Для всех остальных браузеров
myDiv.style.cssFloat = "слева"; 

Практическое использование плавающих элементов

Плавающие элементы можно использовать для решения ряда проблем проектирования в макетах CSS. Некоторые примеры обсуждаются здесь.

2-столбцовый макет с фиксированной шириной

Роджер Йоханссон из 456 Berea Street описывает 8-шаговое руководство по созданию простого, кросс-браузерного, 2-столбцового макета с центрированием по горизонтали. Свойство float является неотъемлемой частью химии этого макета.

«Макет состоит из заголовка, горизонтальной панели навигации, основного столбца содержимого, боковой панели и нижнего колонтитула. Он также расположен по центру окна браузера по горизонтали. Довольно простой макет, и его совсем не сложно создать с помощью CSS, как только вы узнаете, как бороться с неизбежными ошибками Internet Explorer».

Простая 2-х колоночная CSS-раскладка

3-х колоночная, одинаковой высоты

Петр Станичек из pixy.cz демонстрирует кросс-браузерную 3-х колоночную компоновку, снова используя float :

«Нет таблиц, нет абсолютного позиционирования (нет позиционирование вообще), никаких хаков(!), одинаковая высота всех столбцов. Левый и правый столбцы имеют фиксированную ширину (150 пикселей), средний — эластичный.»

3-столбцовый макет с CSS

Плавающее изображение с подписью

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

Плавающее изображение и заголовок

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

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

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

. Как создать меню CSS с помощью спрайтов изображений

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

Галереи фотографий на основе сетки

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

На странице продуктов Foremost Canada (вверху) их продукты отображаются в формате сетки рядом с боковой панелью в левой колонке. Фотографии отображаются в виде неупорядоченного списка со свойством float для всех

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

Страница футонов Paragon Furniture (см. выше) — еще один пример страницы продукта, использующей неупорядоченный список с элементами плавающего списка.

Страница результатов поиска iStockphoto (вверху) представляет собой сетку фотографий с аналогичной структурой, но на этот раз фотографии содержат элемента

, а не

элементов.

Выравнивание поля

с помощью кнопки

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

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