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

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

BOoucwF3l2I.jpg

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

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

Для чего это надо?
  • Вопрос задан
  • 3735 просмотров
Решения вопроса 2
@IoannGrozny
Front-end разработчик
такой clearfix служит не для запрета обтекания, а для фикса размеров элемента, который содержит float потомков.
благодаря этому хаку элемент растянется на максимально возможную высоту(например высоту самого высокого элемента-потомка), и ширину(если элемент inline-block или float).
Ответ написан
Комментировать
linoleum
@linoleum
clearfix.. Трюк для очистки флоатов. Чтобы следующие элементы не обтекали данный.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
:before и :after - это псевдоэлементы, поддержка которых уже стала очень хорошей и их стали использовать массово. Трюк с очисткой флоатов - это лишь вершина айсберга.
Еще применяют псевдоэлементы для декоративных целей. Когда, например, нужно добавить к кнопке иконку из спрайтов. Раньше для этого добавляли в html дополнительный элемент и вешали на него нужные стили, сейчас для этих же целей можно использовать псевдоэлемент.
Короче, они избавляют от использования избыточных тэгов.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы