Окремий div з clearfix в CSS

Окремий div з clearfix в CSS

У попередньому уроці ми додавали клас clearfix безпосередньо елементу, який повинен був очиститися від впливу float.

Але на практиці частіше використовують окремий порожній div з класом clearfix.

Такий блок ставлять між контейнером з float-елементами та наступним блоком.

<div class="parent">
  <img src="img.png" alt="">
  text
</div>

<div class="clearfix"></div>

<div class="parent">
  text
</div>

.parent {
  border: 1px solid red;
}

.parent img {
  float: left;
}

.clearfix {
  clear: both;
}

Чому використовується окремий блок

Іноді неможливо або незручно змінювати HTML-структуру існуючого елемента. У такому випадку додають окремий clearfix між блоками.

• clearfix ставиться після елемента з float.
• clear: both очищає обтікання з обох сторін.
• Після clearfix наступний блок починається нижче float-елементів.
• Такий спосіб часто зустрічається у старих проєктах.

.clearfix {
  clear: both;
}