Что за CSS хаки вида: ":before {content: ""}..."?

Question

[Сергей Шилов]

Всё чаще и чаще вижу в сайтах, свёрстанных на бастрапе или в стандартном шаблоне Wordpress'a или любом другом сайте с адаптивным дизайном такую штуку:



То есть делают после каких-то DIV'ов псевдоселектор :before c такими параметрами:

div:before{
content: "";
display: table;
}

Для чего это надо?

Answer 1

[Иван Беленков]

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

Answer 2

[linoleum]

clearfix.. Трюк для очистки флоатов. Чтобы следующие элементы не обтекали данный.

Comments

[Сергей Шилов]

Я так и думал, но почему бы просто не писать clear:both; для того же :before? зачем тейбл делать и контент там какой-то?

[Константин Довнар]

@Olivoin без контента before не отображается.

[Петр Волханов]

@Olivoin Можно писать просто clear:both

Answer 3

[Александр Першин]

:before и :after - это псевдоэлементы, поддержка которых уже стала очень хорошей и их стали использовать массово. Трюк с очисткой флоатов - это лишь вершина айсберга.
Еще применяют псевдоэлементы для декоративных целей. Когда, например, нужно добавить к кнопке иконку из спрайтов. Раньше для этого добавляли в html дополнительный элемент и вешали на него нужные стили, сейчас для этих же целей можно использовать псевдоэлемент.
Короче, они избавляют от использования избыточных тэгов.

Comments

[Юрий Лобанов]

Автор по видимому знает, что такое before и after, вопрос именно про очистку флоатов. Я тоже этого не знал, так что полезно. Кстати, я присоединяюсь к его вопросу: почему нельзя писать clear:both ?

[Петр Волханов]

Можно писать просто clear:both