Zrušení obtékání pomocí vlastnosti clear v CSS

Pro řešení tohoto problému existuje speciální vlastnost clear, která zruší obtékání. Hodnota left zruší obtékání zleva, hodnota right - zprava, a hodnota both - z obou stran. Tato hodnota se používá nejčastěji.

Takže vlastnost clear zruší obtékání. V našem případě nám to umožní dosáhnout toho, aby plovoucí obrázek z prvního divu nepřekrýval druhý div.

Přitom clear by se měl aplikovat na ten prvek, na který by neměly plovoucí prvky překrývat, to znamená v našem případě by se měl aplikovat na druhý div.

Pojďme to udělat - dáme druhému divu kromě třídy parent ještě třídu clearfix a pro tuto novou třídu nastavíme vlastnost clear na hodnotu both - překrývání obrázkem zmizí:

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

css.parent {
  border: 1px solid red;
}
.parent img {
  float: left;
}

.clearfix {
  clear: both;
}

Результат:

Název clearfix je obecně přijímaný, proto jej i nadále používejte.