Clearfix на CSS
Многие верстальщики слышали о clearfix на CSS. Clearfix - метод отмены действия float без изменения структуры HTML-документа. Данный метод некоторыми верстальщиками весьма активно используется, поэтому я решил о нём Вам рассказать в данной статье.
Давайте разберём такой пример:
<div id="article">
<img src="img.jpg" alt="" style="float: left;" />
<p>Текст статьи</p>
</div>
<div>Подвал сайта</div>
Всё бы ничего, но блок "Подвал сайта" оказался то же справа от картинки, а не под ней. Какое решение этой проблемы? Совершенно очевидно, что надо просто добавить ещё один блок, отменяющий действие float:
<div id="article">
<img src="img.jpg" alt="" style="float: left;" />
<p>Текст статьи</p>
<div style="clear: both;">
</div>
</div>
<div>Подвал сайта</div>
Теперь всё встаёт на свои места, однако, мы изменили структуру HTML-кода, добавив в него непонятный пустой блок. Так вот clearfix позволяет избежать этого. Никакого блока добавлять не нужно, а достаточно написать в CSS-коде так:
#article:after {
content: " ";
clear: both;
display: table;
}
Псевдоэлемент after позволяет вывести некий контент после содержимого элемента. Этот контент задаётся в свойстве content. Так же этот контент делается табличным элементом и у него отменяется действие float.
Этот способ работает во всех современных браузерах, поэтому он является кроссбраузерным.
От себя добавлю, что я привык добавлять блок с clear: both; в HTML, но познакомить Вас с clearfix в CSS я тоже считал нужным.
А тем, у кого данная статья вызвала затруднения, рекомендую пройти этот курс. После данного курса Вы без труда сможете сверстать страницу любой сложности.
-
Создано 14.02.2014 13:31:56
-
Михаил Русаков
Комментарии (2):
Замечательно! Просто и убедительно...
Ответить
можно сделать проще <div style="clear: both;">Подвал сайта</div>
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.