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í:

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

.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.