Clearfix

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

When using the CSS property float: left or float: right, elements will not be displayed as expected.

<div class="items">
    <div class="item"><p><img src="image.jpg" alt=""></p><p>Example picture</p></div>
    <div class="item"><p><img src="image.jpg" alt=""></p><p>Example picture</p></div>
    <div class="item"><p><img src="image.jpg" alt=""></p><p>Example picture</p></div>
</div>

Clearfix

Example on JSFiddle

In the example above, it can be seen that the parent element with a white background "does not cover" its children. For the page to be rendered as expected, for the parent element you need to add the class .clearfix.

<div class="items clearfix">
    <div class="item"><p><img src="image.jpg" alt=""></p><p>Пример картинки</p></div>
    <div class="item"><p><img src="image.jpg" alt=""></p><p>Пример картинки</p></div>
    <div class="item"><p><img src="image.jpg" alt=""></p><p>Пример картинки</p></div>
</div>

Clearfix

Example on JSFiddle

Some designers, instead of using "clearfix", specify the CSS property overflow: hidden, which is incorrect because in this case, objects that go beyond the container become invisible. For example, arrows for a slider, or stickers ("novelty", "hit") on product cards.