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

До поры до времени с блоками-распорками приходилось мириться, так как без них было никак не обойтись. Но время шло и в браузерах появилась поддержка так называемых псевдоэлементов.

Псевдоэлементы позволяют с помощью CSS вставить в структуру HTML-документа узлы, которых нет в HTML коде. То есть можно вставить в код элемент и не писать его в HTML. Благодаря псевдоэлементам появилось решение проблемы флоатов без использования дополнительного элемента.

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

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

А затем класс clearfix добавляется к контейнеру, внутри которого лежат флоатные колонки. После этого в контейнер не нужно добавлять дополнительный элемент-распорку, так как распорка создаётся с помощью псевдоэлемента.

Подробнее псевдоэлементы мы разберем в одной из последующих частей.