Для чего используется этот css код?

Question

[Вячеслав Лебедев]

Добрый вечер!
Для чего применяются эти правила?
Пример кода:

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

ps: лучшего заголовка для этого вопроса придумать не смог.

Comments

[Вячеслав Лебедев]

А еще, методом проб и ошибок, я выяснил, что это влияет на правильный расчет высоты блоков (по контенту).

Answer 1

[Евгений Петров]

Update
Без использования clear этот код годится для предотвращения margin-collapse (перетекания вертикального margin со стороны первого и последнего детей).
Только в правиле content для краткости можно записать пустую строку. По итогу — отличное средство, ибо overflow:hidden не всегда уместно. Как и задание рамки.

Для предотвращения выпадения из элемента плавающих потомков к этим правилам добавляется clear. По сути, нужен лишь :after, но часто оставляют и :before, хотя его применение может привести к не совсем желаемым последствиям (начало внешнего верхнего отступа первого ребёнка от нижнего внешнего отступа плавающего элемента).

jsfiddle.net/petroveg/avjLscwf

Comments

[Kater-auf-Dach]

Изменил ответ, там же - почему table, а не block.

Answer 2

[Kater-auf-Dach]

Почитайте про clearfix. Так очищают поток при использовании плавающих элементов.

Дополню ответ:
Это часть micro clearfix hack Галлахера
Собственно, код:

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

Comments

[Евгений Петров]

Да ничего вы так не очистите. Попробуйте придумать другое объяснение.
jsfiddle.net/petroveg/rndmoduj

[Kater-auf-Dach]

Евгений Петров: Это понятно. Подумал, что в виду имелся все же clear:both.

[Евгений Петров]

Это — приём для предотвращения margin-collapse вместо overflow:hidden или задания рамок. Не совсем clearfix.

[Kater-auf-Dach]

Евгений Петров: Хмм, ваш полный ответ ниже гораздо корректнее этого замечания. С тем я полностью согласен

Answer 3

[Rad1calDreamer]

Сатану вызывает =)
А серьезно - похоже на сбор float, но какой то кривой

Comments

[Вячеслав Лебедев]

bootstrap'овская штука :) Вот они похоже сатану пытались вызвать... и у них это вышлло))

Answer 4

[Максим Гречушников]

почему не можете попробовать этот же вопрос задать яндексу? вы не поверите, но он быстро умеет отвечать!
yandex.ru/yandsearch?text=css%20after&lr=22

htmlbook.ru/css/after

Comments

[Евгений Петров]

Проблема не в том, что автор не знает :after, а в том, что это правило неизвестно для чего написано.

[Вячеслав Лебедев]

Евгений Петров: Именно! Раз уж сбрасывает float у элементов. То почему бутстрап решил выбрать такой подход, а не простой clear both<code>