При использовании CSS-свойства float: left или float: right , элементы начнут выводиться не так, как ожидается.
На примере выше видно, что родительский элемент с белым фоном «не покрывает» свои дочерние элементы. Чтобы страница выводилась как ожидалось, для родительского элемента надо добавить класс .clearfix .
Некоторые верстальщики вместо использования «clearfix» указывают CSS-свойство overflow: hidden , что является неправильным, т.к. в этом случае, объекты, выходящие за пределы контейнера, становятся невидимыми. Например, стрелочки для слайдера, или стикеры («новинка», «хит») на карточках товаров.
Многие верстальщики слышали о clearfix на CSS. Clearfix — метод отмены действия float без изменения структуры HTML-документа. Данный метод некоторыми верстальщиками весьма активно используется, поэтому я решил о нём Вам рассказать в данной статье.
Давайте разберём такой пример:
Всё бы ничего, но блок «Подвал сайта» оказался то же справа от картинки, а не под ней. Какое решение этой проблемы? Совершенно очевидно, что надо просто добавить ещё один блок, отменяющий действие float:
Теперь всё встаёт на свои места, однако, мы изменили структуру HTML-кода, добавив в него непонятный пустой блок. Так вот clearfix позволяет избежать этого. Никакого блока добавлять не нужно, а достаточно написать в CSS-коде так:
#article:after <
content: » «;
clear: both;
display: table;
>
Псевдоэлемент after позволяет вывести некий контент после содержимого элемента. Этот контент задаётся в свойстве content. Так же этот контент делается табличным элементом и у него отменяется действие float.
Этот способ работает во всех современных браузерах, поэтому он является кроссбраузерным.
От себя добавлю, что я привык добавлять блок с clear: both; в HTML, но познакомить Вас с clearfix в CSS я тоже считал нужным.
А тем, у кого данная статья вызвала затруднения, рекомендую пройти этот курс. После данного курса Вы без труда сможете сверстать страницу любой сложности.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: .
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: .
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 2 ):
Замечательно! Просто и убедительно.
можно сделать проще
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2019 Русаков Михаил Юрьевич. Все права защищены.
Дата публикации: 2014-06-12
От автора: Очистка плавающих элементов долго была самой распространенной необходимостью во фронт-энд разработке. Не удивительно, что в течение нескольких лет, нам было предоставлено множество техник, известных как методы clearfix. До того, как мы углубимся в различные методы, давайте посмотрим на саму проблему, которую метод clearfix призван решать.
Сценарий: .el-1 и .el-2 – элементы, плавающие бок о бок внутри контейнера, а также есть элемент .main после элемента .container
Желаемый результат: Мы хотим, чтобы .container раскрывался до высоты своих дочерних элементов (то есть до самого высокого из двух .el-1 и .el-2), и мы хотим, чтобы элемент .main был после .container.
Действительный результат: .container сворачивается и не имеет высоты вообще, как будто внутри ничего нет, что ставит .main на нежелательную позицию и потенциально заставляет исчезнуть фоновые изображения и границы, заданные элементу .container.
Основываясь на вышеописанном сценарии, наша разметка должна выглядеть как-то так:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Тогда наш CSS код будет выглядеть вот так:
Наконец, результат показан на демо ниже:
Глядя на демо и посмотрев на CSS код для элемента .container, вы увидите, что он и вправду свернулся. Вы можете увидеть кусочек черной границы наверху, и нет даже намека на цвет фона. Значит, он не расширяется для того, чтобы помещать .el-1 и .el-2, позволяя элементу .main переместиться в неожиданное место ( в нашем случае под элемент .el-2).
Несмотря на то, что многие считают это багом браузера либо неправильной имплементацией свойства float. Это всего лишь принцип, по которому работают плавающие элементы. Хотя в процессе разработки, во многих случаях для нас он является нежелательным результатом. Что ставит для нас простую задачу – необходимость «очищать плавающие элементы».
Очищение плавающих элементов (или clearfix) призвано заставить родительский элемент расширяться, чтобы полностью вмещать дочерние элементы. Таким образом, следующие элементы будут идти под контейнером. На протяжении нескольких лет, для достижения этой цели появлялись различные методы. Прежде чем, мы обратимся к этим методам, давайте повнимательнее рассмотрим CSS свойство clear, которое является основной возможностью CSS для решения этой задачи.
Свойство “clear”
MDN определяет clear как:
Свойство CSS clear определяет должен элемент, идущий вслед за плавающим, находиться перед ним или сдвинут вниз (очищен).
Из этого обозначения, становится понятным, что свойство clear может предотвратить наплыв других элементов поверх плавающих… правильно. Теперь перейдем к самим методам.
Решение 1: дедовский способ
Это метод старой закалки. Старая закалка – понятие относительное, и, конечно же, настоящая старая закалка требует использования таблиц для разметки (в случае чего очищение плавающих элементов не нужно). Так что считайте этот метод дедовским, с тех пор как появились плавающие элементы.
Сама суть – очень простая: вставьте пустой элемент, которому задано свойство clear, вниз контейнера, содержащего плавающие элементы. Долгое время использование специального класса для этой цели было традицией, чтобы вы могли его использовать и дальше в вашем HTML. Вот классическая структура: