Зачем clearfix нужно добавлять еще и c помощью псевдоэлемента :before?

Question

[B2o5T]

Зачем clearfix от Nicolas Gallagher нужно добавлять еще и c помощью псевдоэлемента :before?

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table; 
}

.clearfix:after {
    clear: both;
}

Answer 1

[Дамир Рысаев]

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

Including the :before selector is not necessary to clear the floats, but it prevents top-margins from collapsing in modern browsers. (с) Nicolas Gallagher

Если захотите почитать про это ещё:
clearfix Reloaded + overflow:hidden Demystified
How to "patch" clearfix so it can better handle co...

Comments

[Дамир Рысаев]

Слово может быть и ужасное, но придумал его не я.
Вот примеры, где его использовали до меня:
htmlbook.ru/blog/skhlopyvayushchiesya-otstupy
htmlacademy.ru/courses/44/run/9
tech.yandex.ru/education/shri/ekb-2013/talks/1492
habrahabr.ru/post/121810/#comment_3987785
habrahabr.ru/post/189252
Не помню, чтобы я видел словосочетание "складывающиеся отступы".

[Дамир Рысаев]

Если посмотреть в большом англо-русском словаре, то один из переводов слова collapse - схлопывание (звезды). В англо-русском словаре для физиков первый перевод слова collapse схлопывание. В универсальном англо-русском словаре margin collapsing - схлопывание границ.

Answer 2

[Илья Сидоренко]

Хороший вопрос, вот clearfix от rhr.me/:

/* Clearfix  */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

Здесь можно посмотреть полный пример
https://github.com/operatino/markup-process/blob/g...

Comments

[B2o5T]

к чему твой пост? это старый clearfix, нужный для поддержки firefox до версии 3.5. Я спрашивал зачем clearfix нужно добавлять еще и с помощью псевдоэлемента before

Answer 3

[Сергей Мельников]

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

Comments

[B2o5T]

это и так понятно, открыл Америку, прочитай еще раз вопрос, я что спрашивал зачем нужен clearfix? Я спрашивал зачем нужен сlearfix с псевдоэлементом before. Например сompass`овский clearfix построен на этом же clearfix`e, но только с помощью псевдоэлемента after, без before

[Сергей Мельников]

@B2o5T ну так видимо для того, чтобы на элемент с clearfix не повлиял перед ним идущий элемент с float

[Сергей Мельников]

@B2o5T и вообще, тебе помочь пытаются, а ты еще и вые***, относись с уважение к каждому ответу, ребята ведь стараются