Очистка плавающих элементов: обзор различных методов clearfix

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

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

автор

Перевод выполнила: Валерия Заруцкая

Меня зовут Валерия, я живу в Киеве. Переводчик в прошлом, сейчас я фронт-энд разработчик. Неплохо владею HTML5 и CSS3, Twitter bootstrap, адаптивной версткой, работаю с jQuery, активно изучаю чистый JavaScript, имею представление об MVC фреймворках, в частности Ruby on Rails.

Сценарий: .el-1 и .el-2 – элементы, плавающие бок о бок внутри контейнера, а также есть элемент .main после элемента .container

Желаемый результат: Мы хотим, чтобы .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 {
  /* стили для класса .el-1*/
}
 
.el-2 {
  /* стили для класса .el-2 */
}
 
.main {
  /* стили для класса .main */
}

Наконец, результат показан на демо ниже:

Глядя на демо и посмотрев на CSS код для элемента .container, вы увидите, что он и вправду свернулся. Вы можете увидеть кусочек черной границы наверху, и нет даже намека на цвет фона. Значит, он не расширяется для того, чтобы помещать .el-1 и .el-2, позволяя элементу .main переместиться в неожиданное место ( в нашем случае под элемент .el-2).

Несмотря на то, что многие считают это багом браузера либо неправильной имплементацией свойства float. Это всего лишь принцип, по которому работают плавающие элементы. Хотя в процессе разработки, во многих случаях для нас он является нежелательным результатом. Что ставит для нас простую задачу – необходимость «очищать плавающие элементы».

Очищение плавающих элементов (или clearfix) призвано заставить родительский элемент расширяться, чтобы полностью вмещать дочерние элементы. Таким образом, следующие элементы будут идти под контейнером. На протяжении нескольких лет, для достижения этой цели появлялись различные методы. Прежде чем, мы обратимся к этим методам, давайте повнимательнее рассмотрим CSS свойство clear, которое является основной возможностью CSS для решения этой задачи.

Свойство “clear”

MDN определяет clear как:

Свойство CSS clear определяет должен элемент, идущий вслед за плавающим, находиться перед ним или сдвинут вниз (очищен).

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

Решение 1: дедовский способ

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

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

.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.

Когда-то этот метод был одним из самых распространенных. Он работает быстро и просто. Однако, в современном мире когда принято разделять содержимое и оформление, а также стремиться сделать все максимально семантическим, этот метод не везде встречает восхищение.

Метод 2: способ Overflow

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

.container {
  overflow: hidden; /* can also be "auto" */
}

Наш HTML код останется прежним, без каких-либо дополнительных элементов. Вот демо:

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

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

Метод 3: класс “clearfix”

Вы часто о нем слышите, но что он из себя представляет? Все продвинутые разработчики его используют, и вы тоже хотите. “clearfix” (что означает исправление очищения плавающих элементов) определяет класс .clearfix в нашей таблице стилей, который мы можем назначить любому элементу, содержащему плавающие. Это заставит контейнер расшириться, выталкивая следующие элементы вниз. Как он работает? Он использует замечательные псевдо-элементы ::before и ::after. Николас Галахер описывает его достаточно точно:

Этот метод создает псевдо-элементы и задает им display: table, что создает анонимную ячейку таблицы. Псевдо-элемент :after используется для очищения плавающих элементов. И в результате… общее количество кода сокращается.

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

.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

И обратите внимание, Chris Coyier советует, что в случае, если вам не нужна поддержка браузеров ниже IE8, то вы вполне можете обойтись следующим кодом:

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Просто, эффективно и легко использовать в дальнейшем.

Заметьте: метод, использованный выше – это микро “clearfix”, популяризованный Николасом Галахером. Единственное отличие – это имя класса, которое использует Николас. До появления этого метода, использовались похожие техники, описанные Питером Паулем Кохом и Тьерри Коблентцом. В частности, этот метод clearfix имеет достаточно долгую историю и тот метод, что мы использовали выше –его последняя итерация.

Метод 4: значение contain-floats из будущего

Что интересно, спецификация W3C добавила новое значение для свойства min-height (и для других свойств min/max), для того, чтобы помочь решить эту проблему. Оно выглядит следующим образом:

.container {
  min-height: contain-floats;
}

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

Заключение

Вот и все, мы быстро пробежались по всем методам “clearfix”. Применение класс .clearfix стало стандартом и я убедительно рекомендую его использование вместо предыдущих двух методов. Он просто делает жизнь легче. Конечно, вам удобнее всего использовать то, что подходит именно вам, но, как упоминалось ранее, я бы советовал избегать метода 1 в эти дни и использовать стандартный “clearfix” трюк.

Автор: Nick Salloum

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Aleksandr

    Вы, похоже, ошиблись. Должно же быть вроде Content:» » ?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree