Czyszczeniem elementów pływających po polsku brzmi co najmniej dziwnie i bardziej może się kojarzyć z oczyszczalnią ścieków czy też stocznią remontowo-budowlaną 😉
Ad rem. Problem z czyszczeniem pływających elementów w HTML może się pojawić, gdy kilka takich elementów (lub nawet jeden) mają znajdować się w kontenerze o widocznej ramce, której wysokość ma się automatycznie dopasować do wielkości wspomnianych elementów wewnątrz.

Tak by to wyglądało w kodzie HTML:

<div class="container">
	<div class="left-side">
		.....
	</div>
	<div class="right-side">
		.....
	</div>
</div>

z formatowaniem CSS:

.container {
	border: 5px dashed #900;
}
.left-side {
	float: left;
	width: 48%;
}
.right-side {
	float: right;
	width: 48%;
}

Wynikiem takiego kody będzie taki oto rezultat:

Element zawierający wyłącznie elementy pływające wewnątrz nie posiada zdefiniowanej wysokości, dlatego ramka nie otacza całej treści

Jak widać ramka nie otacza całej treści, a w zasadzie to niczego nie otacza 😉 Rysuje się ramka o wysokości 0.
Tak to się dzieje, gdy kontener zawiera tylko elementy pływające. Wówczas nie ma zdefiniowanej wysokości.

Rozwiązanie nr 1

W takim przypadku powszechnie dodaje się wewnątrz kontenera jeszcze jeden element tym razem niepływający, którego zadaniem jest czyszczenie „pływania”. Dzięki temu temu kontener posiada „punkt zaczepienia” do którego może się dopasować.

<div class="container">
	<div class="left-side">
		.....
	</div>
	<div class="right-side">
		.....
	</div>
	<div style="clear: both;"></div>
</div>

Rozwiązanie nr 2

Okazuje się, że jest jeszcze jedno rozwiązanie, które można wykonać w samym CSS. Wystarczy następująco zdefiniować styl kontenera:

.container {
	border: 5px dashed #900;
	overflow: auto; width: 100%
}

Oczywiście ma swoją wadę, nie działa pod IE7. Po za tym wszystkie inne przeglądarki nie powinny sprawiać problemów.

Ostateczny i pożądany rezultat:

Ramka kontenera automatycznie dopasowująca się do wielkości elementów pływających