Ha egy HTML elembe float tulajdonságú elemeket helyezünk, a szülő elem mérete nem fogja követni a tartalom méretét. Így például ha egy bekezdésben lévő szöveg melletti, float használatával körbefolyatott kép magasabb, mint maga a szöveg, a kép ki fog lógni a bekezdésből. Ez elsőre nem feltétlenül szembetűnő, de ha pl. háttérszínt vagy keretet állítunk be a bekezdéshez, a jelenség zavaró lesz, sőt az oldal felépítését is elronthatja. Egyszerű megoldás lehet ilyenkor a bekezdés magasságát CSS-ben megadni, azonban dinamikus oldalak esetében ez nem megoldás. Ehelyett ajánlott CSS fájlunkba felvenni az alábbi sorokat, és az így definiált osztályt beállítani a lebegő elem(ek)et tartalmazó HTML elemeknél.

1
2
3
4
5
6
7
8

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
* html .clearfix { height: 1%; }

1
2
3

<p class="clearfix">
	<img src="kep.jpg" style="float: left">Ide jön a rövid szöveg.
</p>