Многие верстальщики слышали о clearfix на CSS. Clearfix - метод отмены действия float без изменения структуры HTML-документа. Данный метод некоторыми верстальщиками весьма активно используется, поэтому я решил о нём Вам рассказать в данной статье.
Давайте разберём такой пример:
Всё бы ничего, но блок "Подвал сайта" оказался то же справа от картинки, а не под ней.
Какое решение этой проблемы? Совершенно очевидно, что надо просто добавить ещё один блок, отменяющий действие float:
Теперь всё встаёт на свои места, однако, мы изменили структуру HTML-кода, добавив в него непонятный пустой блок. Так вот clearfix позволяет избежать этого. Никакого блока добавлять не нужно, а достаточно написать в CSS-коде так:
Псевдоэлемент after позволяет вывести некий контент после содержимого элемента. Этот контент задаётся в свойстве content. Так же этот контент делается табличным элементом и у него отменяется действие float.
Этот способ работает во всех современных браузерах, поэтому он является кроссбраузерным.
От себя добавлю, что я привык добавлять блок с clear: both; в HTML, но познакомить Вас с clearfix в CSS я тоже считал нужным.
Давайте разберём такой пример:
Код
<div id="article">
<img src="img.jpg" alt="" style="float: left;" />
<p>Текст статьи</p>
</div>
<div>Подвал сайта</div>
<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>
<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;
}
content: " ";
clear: both;
display: table;
}
Псевдоэлемент after позволяет вывести некий контент после содержимого элемента. Этот контент задаётся в свойстве content. Так же этот контент делается табличным элементом и у него отменяется действие float.
Этот способ работает во всех современных браузерах, поэтому он является кроссбраузерным.
От себя добавлю, что я привык добавлять блок с clear: both; в HTML, но познакомить Вас с clearfix в CSS я тоже считал нужным.