floatСвойство в CSS используется для позиционирования и размещения на веб - страницах.
.module ( float: left; )Значения
none: элемент не плавает. Это начальное значение.left: перемещает элемент слева от контейнера.right: перемещает элемент справа от контейнера.inherit: элемент наследует направление плавания своего родителя.
display: block;
Что означает плавание?
Чтобы понять цель и происхождение float, мы можем обратиться к полиграфическому дизайну. В макете для печати изображения могут быть размещены на странице таким образом, чтобы текст обтекал их по мере необходимости. Это обычно и уместно называется «переносом текста». Вот пример этого.
В программах верстки страницы можно указать, чтобы блоки, содержащие текст, соблюдали перенос текста или игнорировали его. Игнорирование обтекания текстом позволит словам обтекать изображение, как будто его даже не было. В этом разница между тем, чтобы изображение было частью потока страницы (или нет). Веб-дизайн очень похож.
В веб-дизайне элементы страницы с floatпримененным к ним свойством CSS аналогичны изображениям в макете для печати, где текст обтекает их. Плавающие элементы остаются частью потока веб-страницы. Это заметно отличается от элементов страницы, которые используют абсолютное позиционирование. Абсолютно позиционированные элементы страницы удаляются из потока веб-страницы, например, когда текстовому полю в макете печати было сказано игнорировать перенос страницы. Абсолютно позиционированные элементы страницы не повлияют на положение других элементов, а другие элементы не повлияют на них, независимо от того, касаются они друг друга или нет.
Демо
В этой демонстрации показана статья с двумя изображениями: одно установлено в float: left, а другое установлено в float: right. Нажмите кнопку «Переключить поплавки», чтобы включить и выключить поплавки.
См. Пример Pen Float от CSS-Tricks (@ css-tricks) на CodePen.
Поплавки для макета
Помимо простого примера обертывания текста вокруг изображений, плавающие элементы можно использовать для создания целых веб-макетов .
Поплавки также полезны для макета в небольших случаях. Возьмем, к примеру, эту небольшую область веб-страницы. Если мы используем floatизображение нашего аватара, когда это изображение изменит размер, текст в поле изменится, чтобы разместить его:
Такой же макет можно реализовать, используя относительное позиционирование на контейнере и абсолютное позиционирование на аватаре. Но, когда это будет сделано таким образом, текст не будет затронут аватаром и не сможет переформатироваться при изменении размера.
Демо
В этой демонстрации показан аватар с float: leftприложением. Нажмите кнопку «Переключить размер изображения», чтобы увидеть более широкую версию изображения аватара. Обратите внимание, что текст перекомпонован для размещения изображения, а не поверх изображения.
См. Демонстрацию Pen Float от CSS-Tricks (@ css-tricks) на CodePen.
Очистка поплавка
Родственная собственность Float - clear. Элемент, для которого clearзадано свойство, не будет перемещаться рядом с поплавком, как того желает поплавок, а будет перемещаться вниз мимо поплавка. Опять же, иллюстрация полезнее слов:
В приведенном выше примере боковая панель смещена вправо и короче основной области содержимого. Затем нижний колонтитул должен прыгать в это доступное пространство, как того требует поплавок. Чтобы решить эту проблему, нижний колонтитул можно очистить, чтобы он оставался под обоими плавающими столбцами.
#footer ( clear: both; )Clear также имеет четыре допустимых значения. Значение bothнаиболее часто используется, который очищает поплавки , поступающие от обоих направлений. Значения leftи rightмогут использоваться для очистки поплавка только в одном направлении соответственно. Начальное значение равно none, которое обычно не требуется, если оно не используется для явного удаления установленного clearзначения. Значение inheritзаставляет элемент наследовать значение своего родителя clear. Как ни странно, Internet Explorer не поддерживал это значение до IE8.
Очистка только leftor rightfloat, хотя и не так часто встречается в дикой природе, определенно имеет свое применение.
Великий крах
Одна из самых непонятных вещей в работе с float - это то, как они могут влиять на элемент, который их содержит (их «родительский» элемент). Если родительский элемент не содержит ничего, кроме плавающих элементов, его высота уменьшается до нуля. Это не всегда очевидно, если родительский элемент не содержит визуально заметного фона, но это важно знать.
Каким бы парадоксальным ни казался коллапс, альтернатива еще хуже. Рассмотрим этот сценарий:
Если бы элемент блока наверху автоматически расширялся для размещения плавающего элемента, у нас был бы неестественный разрыв интервала в потоке текста между абзацами, без практического способа исправить это. Если бы это было так, мы, дизайнеры, жаловались бы на такое поведение гораздо сильнее, чем на коллапс.
Почти всегда приходится иметь дело со сворачиванием, чтобы предотвратить странную компоновку и проблемы с кросс-браузером. Мы исправляем это, очищая поплавок после плавающих элементов в контейнере, но до закрытия контейнера.
Методы очистки поплавков
Если вы находитесь в ситуации, когда вы всегда знаете, каким будет следующий элемент, вы можете применить clear: both;значение к этому элементу и заняться своими делами. Это идеальный вариант, поскольку он не требует никаких хитростей и дополнительных элементов, что делает его семантическим. Конечно, обычно так не получается, и нам нужно иметь больше инструментов для очистки плавающих объектов в нашем наборе инструментов.
- Метод Empty Div - это буквально пустой div.
- Метод Overflow основан на установке
overflowсвойства CSS для родительского элемента. Если это свойство установлено на родительский элементautoилиhiddenна родительском элементе, родительский элемент будет расширяться, чтобы содержать поплавки, эффективно очищая его для последующих элементов. Этот метод может быть прекрасно семантическим, поскольку он может не требовать дополнительных элементов. Однако, если вы обнаружите, что добавляете новыйdivтолько для того, чтобы применить это, он столь же несемантичен, как и пустойdivметод, и менее адаптируем. Также имейте в виду, что свойство переполнения не предназначено специально для очистки поплавков. Будьте осторожны, чтобы не скрыть содержимое и не вызвать нежелательные полосы прокрутки. - Простой метод очистки (также известный как «clearfix») использует умный псевдоселектор CSS (
:after) для очистки плавающих элементов. Вместо того, чтобы устанавливать переполнение для родительского элемента, вы применяете к нему дополнительный класс, например «clearfix». Затем примените этот CSS:.clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )Это применит небольшой фрагмент содержимого, скрытый от просмотра, после родительского элемента, который очищает float. Это еще не все, так как необходимо использовать дополнительный код для поддержки старых браузеров. Примечание. Также просмотрите этот фрагмент, в котором отслеживаются самые последние и лучшие исправления для очистки, включая более новый «micro clearfix».
В разных сценариях требуются разные методы очистки поплавков. Возьмем, к примеру, сетку блоков разных типов.
Чтобы лучше визуально соединить похожие блоки, мы хотим начинать новый ряд как нам угодно, в данном случае при изменении цвета. Мы могли бы использовать метод переполнения или простой метод очистки, если бы каждая из цветовых групп имела родительский элемент. Или мы используем пустой метод div между каждой группой. Три оборачивающих div, которые ранее не существовали, или три после div, которых раньше не было. Я позволю вам решить, что лучше.
Проблемы с поплавками
Поплавки часто бьют за хрупкость. Большая часть этой уязвимости возникла из-за ошибок в IE6 и IE7. По мере того, как эти браузеры уходят в прошлое, эти ошибки исчезают вместе с ними. Но их все же стоит понять, если вам когда-нибудь понадобится отлаживать «OldIE».
- Pushdown - это признак того, что элемент внутри плавающего элемента шире самого плавающего элемента (обычно это изображение). Большинство браузеров будут отображать изображение за пределами поплавка, но при этом выступающая часть не влияет на другой макет. Старые версии IE расширяли float, чтобы содержать изображение, что часто сильно влияло на макет. Типичный пример - изображение, выходящее из основного содержимого, при нажатии боковой панели вниз.
Быстрое исправление: убедитесь, что у вас нет изображений, которые делают это, используйте,
overflow: hidden;чтобы обрезать лишнее. - Ошибка двойной маржи. Еще одна вещь, которую следует помнить при работе с IE 6, заключается в том, что если вы применяете маржу в том же направлении, что и float, она удваивает маржу. Быстрое исправление: установите
display: inlineна float, и не волнуйтесь, он останется элементом уровня блока. - 3px Jog , когда текст , который рядом с перемещаемым элементом таинственно ногами прочь 3px как странный силовом вокруг поплавка. Быстрое исправление: установите ширину или высоту затронутого текста.
- В IE 7 ошибка нижнего поля заключалась в том, что, если плавающий родительский элемент размещал дочерние элементы внутри него, нижнее поле этих дочерних элементов родительским элементом игнорировалось. Быстрое исправление: вместо этого используйте нижний отступ на родительском элементе.
Альтернативы
Если вам нужно обтекать изображения текстом, альтернативы float действительно нет. Кстати, попробуйте эту довольно умную технику обтекания текстом неправильных форм. Но для макета страницы определенно есть выбор. У Эрика Сола есть статья «A List Apart, Faux Absolute Positioning», в которой описывается очень интересный метод, который во многих отношениях сочетает гибкость поплавков с силой абсолютного позиционирования.
CSS3 обрабатывает макет страницы двумя способами:
- Flexbox
- Макет с несколькими столбцами
- Макет сетки
Абсолютно позиционированные поплавки (например, вы абсолютно позиционируете как обычно, но элемент все еще может влиять на другие элементы, например, обтекать его текстом) были обсуждены, но я думаю, что идея была отложена из-за сходства с другими более надежными идеями макета.
видео
Некоторое время назад я делал скринкаст, объясняющий многие из этих концепций поплавков.
Связанный
clearposition
Дополнительная информация
floatв спецификации W3Cfloatв MDN
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Все | Все | Все | Все | Все | Все | Все |