Очистка поплавков долгое время была обычной необходимостью при разработке интерфейса. Поэтому неудивительно, что на протяжении многих лет мы сталкивались с множеством методов очистки поплавков, в настоящее время более широко известных как «методы clearfix». Прежде чем мы углубимся в различные методы, давайте взглянем на проблему, которую пытаются решить методы clearfix.
Сценарий: .el-1 и .el-2 плавают рядом внутри элемента .main после .main элемент .main .
Желаемый результат: мы хотим, чтобы .container расширился до высоты его дочерних элементов (т. .el-1 или .el-2 ), и мы хотим, чтобы .main был после .container .
Фактический результат: .container разрушается и вообще не принимает высоту, как будто внутри него ничего нет, помещая .main в нежелательное место и потенциально вызывая отсутствие каких-либо фонов или границ на .container .
Исходя из приведенного выше сценария, наша разметка может выглядеть примерно так:
<div class="container"> <div class="el-1">A long string of stuff here...</div> <div class="el-2">A short string of stuff here...</div> </div> <div class="main"> Some stuff here... </div>
Тогда наш CSS может выглядеть примерно так:
.el-1, .el-2 { float: left; width: 50%; } .el-1 { /* styles for .el-1 here */ } .el-2 { /* styles for .el-2 here */ } .main { /* styles for .main here */ }
Наконец, результат, как показано в этой демонстрации:
Посмотрев демонстрацию и изучив CSS для элемента .container , вы увидите, что он действительно свернут. Вы можете увидеть намек на черную рамку сверху, и нет никаких признаков цвета фона. Таким образом, он не расширяется, чтобы содержать .el-1 и .el-2 , таким образом оставляя .main чтобы подпрыгнуть до неловкого места (под .el-2 в нашем случае).
Вопреки тому, что многие могут подумать, это не ошибка браузера или неправильная реализация float. Это просто, как работает поплавки . Много раз в нашем развитии, однако, это не наш желаемый результат. Что подводит нас к простой задаче «очистить поплавки».
Очистка float (или clearfixing) в основном заставляет содержащий элемент расширяться, чтобы содержать его дочерние элементы. Таким образом, он заставляет последующие элементы появляться под ним. На протяжении многих лет было исследовано много методов очистки поплавков. Прежде чем мы рассмотрим эти методы, давайте сначала рассмотрим свойство clear CSS, которое является одной из основных функций CSS, которые мы будем использовать, чтобы помочь нам решить эту проблему.
«Чистая» собственность
MDN определяет clear как это:
Свойство clear CSS указывает, может ли элемент находиться рядом с плавающими элементами, которые ему предшествуют, или должен быть перемещен вниз (очищен) под ними.
Только из этого определения ясно, почему свойство clear может ясно очищать наши поплавки… правильно. Теперь давайте углубимся в некоторые методы.
Решение 1: Путь старой школы
Этот метод — старая школа. Старая школа относительна, и, конечно, настоящий метод старой школы предполагает использование таблиц для разметки (в этом случае очистка поплавков ничего не значит). Так что рассмотрите этот метод старой школы, насколько существование поплавков идет.
Идея проста: вставить пустой элемент, у которого объявлено свойство clear внизу контейнера с плавающими элементами. Уже давно принято использовать определенный класс для достижения этой цели, чтобы вы могли повторно использовать его в своем HTML. Вот классическая структура CSS:
.clear { clear: both; }
И HTML может выглядеть так:
<div class="container"> <div class="el-1">I'm floated...</div> <div class="el-2">I'm also floated...</div> <br class="clear"> </div> <div class="main"> Bravo, sirs and madams. I'm in the clear. </div>
И вот наша демонстрация с этим методом:
Примечание. Если вас не интересует свернутый контейнер, а только неправильно расположенный элемент .main , вы также можете разместить «очищенный» элемент после контейнера. Но если вы решите это сделать, то вы можете просто поместить объявление clear: both в .main элемент .main .
Этот метод был методом go to давным-давно. Это работает, просто и понятно. Тем не менее, в наше современное время, отделяющее контент от стиля и пытающееся сделать вещи как можно более семантическими, этот метод, как правило, осуждается многими.
Способ 2: путь переполнения
Используя свойство overflow в нашем .container , мы можем фактически заставить контейнер расширяться до высоты плавающих элементов. Наш CSS будет выглядеть так:
.container { overflow: hidden; /* can also be "auto" */ }
И наш HTML остался бы таким, каким был изначально, без лишних элементов.
Вот демо:
Как вы можете видеть, наш .container расширяется до высоты наших плавающих элементов, цвета фона, границ и фоновых изображений заполнят его, если применить, и все хорошо.
Однако одним из основных недостатков этого метода является тот факт, что любой дочерний контент, который высовывается за пределы элемента контейнера, будет либо обрезаться (предполагая значение hidden ), либо вызывать появление полос прокрутки (предполагая значение auto ). Лучше, чем наше предыдущее решение, но все еще далеко от идеала. Давайте копать дальше.
Метод 3: Класс «clearfix»
Вы часто слышите об этом, но что это? Все крутые дети используют его, и вы тоже хотите. «Clearfix» (что означает исправление очистки поплавков) определяет класс .clearfix в нашей таблице стилей, который мы можем применить к любому элементу, содержащему float. Это заставит элемент контейнера расширяться, толкая последующие элементы под ним. Как это работает? Он использует потрясающие псевдоэлементы CSS ::before и ::after . Николас Галлахер описывает это довольно аккуратно:
Это … генерирует псевдоэлементы и устанавливает их отображение в таблице. Это создает анонимную ячейку таблицы … Псевдоэлемент: after используется для очистки чисел с плавающей точкой. В результате … общий объем необходимого кода уменьшается.
CSS выглядит так:
.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; /* ie 6/7 */ }тем.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; /* ie 6/7 */ }
И наш HTML будет немного изменен, чтобы выглядеть так:
<div class="container clearfix"> <div class="el-1">I'm floated...</div> <div class="el-2">I'm also floated...</div> </div> <div class="main"> Bravo, sirs and madams. I'm in the clear. </div>
И вот наша демка еще раз с добавленным clearfix:
И обратите внимание, что Крис Койер советует, что если вам не нужно поддерживать что-либо ниже IE8, вы можете обойтись только следующим:
.clearfix:after { content: ""; display: table; clear: both; }
Простой, эффективный, семантический и легко используемый повторно.
Примечание: метод, использованный выше, является «микро-исправление», как популяризировал Николас Галлахер. Единственное отличие — это имя класса, которое использует Николас. До этого метода были методы, подобные описанным Питером-Полем Кохом и Тьерри Кобленцем . По сути, clearfix имеет довольно длинную историю, и метод, который мы используем выше, является последней итерацией.
Метод 4: Будущее значение contain-floats значения
Интересно, что спецификация W3C добавила новое значение в свойство min-height (и в другие свойства min / max), чтобы помочь решить эту проблему. Это выглядит так:
.container { min-height: contain-floats; }
Это в основном будет делать то же самое, что и метод clearfix или метод overflow, но с одной строкой кода и без каких-либо недостатков, которые мы обсуждали. И, конечно, вы можете создать отдельный повторно используемый класс clearfix, к которому он может быть присоединен, и просто использовать его один раз в своем CSS.
Похоже, что ни один браузер пока не поддерживает это значение, но, безусловно, за этим нужно следить.
Заворачивать
И вот, ребята, быстрый просмотр различных методов «clearfix». Применение класса .clearfix стало стандартом, и я настоятельно рекомендую использовать его вместо двух предыдущих методов. Это просто облегчает жизнь. Конечно, все, что работает лучше для вас, всегда будет работать, но, как уже упоминалось, я бы посоветовал держаться подальше от метода 1 в эти дни и придерживаться большей части стандартного хакерского кода.