Понимание класса clearfix Bootstrap

Question

Понимание класса clearfix Bootstrap

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

Почему бы не использовать display:block?
кроме того, почему это также относится к ::before псевдокласса?

3 61

twitter-bootstrap less.js clearfix

3 ответа:

The :before псевдо элемент не требуется для самого взлома clearfix.

это просто дополнительная приятная функция, помогающая предотвратить крах маржи первого дочернего элемента. Таким образом, верхний край дочернего блочного элемента элемента "clearfixed" гарантированно будет расположен ниже верхней границы элемента clearfixed.

display:table используется, потому что display:block не делает трюк. Используя display:block маржи коллапс даже с :before элемент.

есть один нюанс: если vertical-align:baseline используется в ячейках таблицы с clearfixed <div> элементы, Firefox не будет выравниваться хорошо. Тогда вы можете предпочесть использовать display:block несмотря на потерю функции защиты от коллапса. В случае дальнейшего интереса прочитайте эту статью:Clearfix мешает вертикальному выравниванию.

9

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

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

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

Пример-Bootstrap Panels

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

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

Итак, для панели-верхний и Нижний колонтитулы, clearfix необходим для очистки макета с плавающей точкой элементов: Класс Clearfix дает визуальное представление о том, что высота родительского контейнера была увеличена для размещения всех его дочерних элементов.
 <div class="container">
    <div class="panel panel-default">
        <div class="panel-footer">
            <div class="col-xs-6">
                <input type="button" class="btn btn-primary"   value="Button1">
                <input type="button" class="btn btn-primary"   value="Button2">
                <input type="button" class="btn btn-primary"   value="Button3">
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-footer">
            <div class="col-xs-6">
                <input type="button" class="btn btn-primary"   value="Button1">
                <input type="button" class="btn btn-primary"   value="Button2">
                <input type="button" class="btn btn-primary"   value="Button3">
            </div>
            <div class="clearfix"/>
        </div>
    </div>
</div>

1

Adam Taylor · Accepted Answer · 2014-12-18 06:18:09

.clearfix определена в less/mixins.less. Прямо над его определением находится комментарий со ссылкой на эту статью:

новый микро clearfix hack

в статье объясняется, как все это работает.

обновление: Да, ссылки-только ответы плохие. Я знал это даже в то время, когда я опубликовал этот ответ, но я не чувствовал, что копирование и вставка были в порядке из-за авторских прав, плагиата и того, что у вас есть. Однако, я сейчас чувствую, что это нормально, так как я связался с оригинальной статьей. Я должен также упомянуть имя автора, хотя, для кредита: Николас Галлахер. Вот мясо статьи (обратите внимание, что "метод Тьерри" относится к "clearfix reloaded" Тьерри Кобленца):

этот "микро clearfix" генерирует псевдо-элементы и их наборы display до table. Это создает анонимная таблица-ячейка и a новый контекст форматирования блока, который значит :before псевдо-элемент предотвращает коллапс верхнего поля. Элемент :after псевдо-элемент используется для снимите поплавки. В результате нет необходимости скрывать какие-либо сгенерированные содержание и общий объем необходимого кода уменьшается.

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

это обеспечивает визуальную согласованность с другими методами удержания поплавка, которые создают новый контекст форматирования блока, например, overflow:hidden

он обеспечивает визуальную согласованность с IE 6/7, когда это.

Б. Н.: существуют обстоятельства, при которых IE 6/7 не будет содержать Нижние поля поплавков в новом контексте форматирования блока. Более подробную информацию можно найти здесь: лучшее сдерживание поплавка в IE использование выражений CSS.

использование content:" " (обратите внимание на пробел в строке контент) избегает Ан Opera bug это создает пространство вокруг четких элементов, если contenteditable атрибут также присутствует где-то в HTML. Спасибо Серхио Черрутти за обнаружение этого исправления. Альтернативное исправление использовать font:0/0 a.

Legacy Firefox

Firefox visibility:hidden чтобы скрыть вставленный символ. Этот потому что устаревшие версии Firefox необходимо content:"." чтобы избежать дополнительное пространство появляется между body и его первый дочерний элемент, при определенных обстоятельствах (например, jsfiddle.net/necolas/K538S/.)

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