Have You Tried IT ?

Information Technology from scratch

Czyszczenie pływających elementów – clear float

Dodano przez Kategoria: HTML / CSS

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:

Ramka wokół elementów pływjących nie dopasowuje się automatycznie do ich rozmiarów

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 dopasowujące się do wielkości elementów pływających

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

 

 

Dodaj komentarz

XHTML: Dozwolone znaczniki: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="">