Что делает класс clearfix в css?

Я видел, что теги div используют класс clearfix, когда дочерний divs использует свойство float. Класс clearfix выглядит следующим образом:

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
.clearfix {
    display: block;
}

Я обнаружил, что если я не использую clearfix, когда я использую свойство bottom-border, граница будет показана над дочерним divs. Может ли кто-нибудь объяснить, что делает класс clearfix? Кроме того, почему существуют два свойства display? Мне это очень странно. Мне особенно интересно, что означает content:'.'.

Спасибо, G

Ответ 1

Как работают поплавки

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

`float` vs `display:inline`

До изобретения display:inline-block веб-сайты используют float для установки элементов рядом друг с другом. float предпочтительнее display:inline, поскольку с последним вы не можете устанавливать размеры элемента (ширина и высота), а также вертикальные paddings (сверху и снизу) - которые могут перемещаться элементы, поскольку они рассматриваются как блок элементы.

Проблемы с поплавком

Основная проблема заключается в том, что мы используем float по назначению.

Другим является то, что в то время как float позволяет бок о бок элементы блочного уровня, поплавки не придают форме своему контейнеру. Это как position:absolute, где элемент "выведен из макета". Например, когда пустой контейнер содержит плавающий 100px x 100px <div>, <div> не будет передавать 100px по высоте контейнеру.

В отличие от position:absolute, это влияет на содержимое, которое его окружает. Содержимое после того, как элемент float будет "обернут" вокруг элемента. Он начинается с рендеринга рядом с ним, а затем под ним, например, как текст газеты обтекает изображение.

Clearfix для спасения

Что делает clearfix, это принудительное содержимое после поплавков или контейнера, содержащего поплавки для рендеринга ниже. Существует много версий для clear-fix, но оно получило свое имя из используемой версии - той, которая использует свойство CSS clear.

Примеры

Вот несколько способов сделать clearfix, в зависимости от браузера и варианта использования. Нужно только знать, как использовать свойство clear в CSS и как рендерить float в каждом браузере, чтобы добиться идеального кроссбраузерного исправления.

Что у вас есть

Предлагаемый стиль - это форма clearfix с обратной совместимостью. Я нашел статью об этом clearfix. Оказывается, это OLD clearfix - все еще питается старыми браузерами. В этой статье есть более новая, более чистая версия. Здесь разбивка:

Первое clearfix, которое вы добавили невидимый псевдоэлемент, который имеет стиль clear:both, между целевым элементом и следующим элементом. Это заставляет псевдоэлемент отображать ниже цели, а следующий элемент под псевдоэлементом.
Второй добавляет стиль display:inline-block, который не поддерживается более ранними браузерами. inline-block похож на inline, но дает вам некоторые свойства, которые блокируют элементы, такие как ширина, высота, а также вертикальное заполнение. Это было предназначено для IE-MAC.
Это было повторное применение display:block из-за правила IE-MAC выше. Это правило было "скрыто" от IE-MAC.

В целом, эти 3 правила поддерживают рабочий кросс-браузер .clearfix со старыми браузерами.

Ответ 2

Когда элемент, такой как div, floated, его родительский контейнер больше не считает его высоту, то есть

<div id="main">
  <div id="child" style="float:left;height:40px;"> Hi</div>
</div>

По умолчанию родительский контейнер не будет иметь 40 пикселей. Это вызывает множество странных причуд, если вы используете эти контейнеры для структурирования макета.

Итак, класс clearfix, который использует различные фреймворки, исправляет эту проблему, заставляя родительский контейнер "признавать" содержащиеся элементы.

С каждым днем я обычно использую фреймворки, такие как 960gs, Twitter Bootstrap для выкладки и не беспокоиться о точном механизме.

Подробнее здесь

http://www.webtoolkit.info/css-clearfix.html

Ответ 3

clearfix я то же, что и Overflow:hidden, и очистить родительский объект с плавающей точкой. Но clearfix не вырезает элемент, который переполняется на него parent. но он работает до IE8 и выше.

Нет необходимости определять "." в содержимом и .clearfix. Просто напишите вот так:

.clr:after {
    clear: both;
    content: "";
    display: block;
}

HTML

<div class="parent clr"></div>

Прочтите эти ссылки для более

http://css-tricks.com/snippets/css/clear-fix/,

Какие методы 'clearfix можно использовать?