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

Добрый вечер!
Для чего применяются эти правила?
Пример кода:
.footer:before,
.footer:after {
  display: table;
  content: " ";
}

ps: лучшего заголовка для этого вопроса придумать не смог.
  • Вопрос задан
  • 329 просмотров
Решения вопроса 1
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Update
Без использования clear этот код годится для предотвращения margin-collapse (перетекания вертикального margin со стороны первого и последнего детей).
Только в правиле content для краткости можно записать пустую строку. По итогу — отличное средство, ибо overflow:hidden не всегда уместно. Как и задание рамки.

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

jsfiddle.net/petroveg/avjLscwf
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Kater-auf-Dach
@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;
}
Ответ написан
Rad1calDreamer
@Rad1calDreamer
Сатану вызывает =)
А серьезно - похоже на сбор float, но какой то кривой
Ответ написан
@maxyc_webber
Web-программист
почему не можете попробовать этот же вопрос задать яндексу? вы не поверите, но он быстро умеет отвечать!
yandex.ru/yandsearch?text=css%20after&lr=22

htmlbook.ru/css/after
Ответ написан
Ваш ответ на вопрос

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

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