Управление макетом

Возвращаясь к практическим вопросам, ::after можно использовать со служебными классами для управления макетом. Известным примером является «clearfix», который гарантирует, что все обтекаемые элементы будут располагаться внутри своего контейнера. Вот пример реализации, хотя существует множество вариаций.

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

Этот стилевой приём был незаменим на протяжении многих лет, но теперь есть более современное решение.

.clearfix {
  display: flow-root;
}

Вот демонстрация, иллюстрирующая проблему и способы её решения. Обратите внимание, что первый наггетс выходит за пределы своего родительского элемента, а второй и третий уже нет.

See the Pen Clearing Chicken Nuggets by Will Boyd (@lonekorean) on CodePen.

Псевдоэлемент ::after также может помочь в вёрстке при добавлении переноса строк. Для этого я отсылаю вас к краткому совету Энди Белла.