Что делает класс clearfix в css? [дубликат]

этот вопрос уже есть ответ здесь:

  • Что такое clearfix? 11 ответов

Я видел 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

3 85
html css clearfix

3 ответа:

как работают "плавающие" блоки

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

float vs display:inline

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

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

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

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

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

Clearfix к спасите

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

примеры

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

то, что ты есть

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

  • в первый clearfix у вас есть добавляет невидимый псевдо-элемент, который выполнен clear:both, между целевым элементом и следующим элементом. Это заставляет псевдо-элемент отображаться ниже целевого объекта, а следующий элемент ниже псевдо-элемента.

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

  • это было повторное применение display:block из-за правила IE-MAC выше. Это правило было "скрыто" от IE-MAC.

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

122

когда элемент, например 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

18

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’ я могу использовать?

5