Ответ 1

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

Новый файл micro clearfix hack

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

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

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

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

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

• Он обеспечивает визуальную согласованность с IE 6/7, когда применяется zoom:1.

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

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

Устаревший Firefox

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

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

Ответ 2

Псевдоэлемент :before не нужен для самой очистки clearfix.

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

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

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

Ответ 3

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

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

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

Пример - панели Bootstrap

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

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

Итак, для панельного заголовка и нижнего колонтитула панели 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>