На сайте ведутся работы!
Поэтому могут быть ошибки и недочеты. Приносим свои извинения и постараемся все исправить в ближайшее время.
AdBlock
Блокируйте рекламу. Просматривайте быстрее.
Adguard
Самый быстрый и легковесный блокировщик рекламы для браузеров.
Недавние обсуждения
Многие верстальщики слышали о 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 я тоже считал нужным.
Теги к материалу
CSS, Clearfix, на
Поделись материалом с друзьями
Рекомендуем к просмотру
К материалу оставили 0 комментариев