Programowanie webowe | 02. Float left vs. Display inline-block

Metoda float:left + clear:both

Mirosław Zelent

Float to realizacja konceptu tzw. opływania elementu – znamy tę sztuczkę z Worda czy z innego edytora biurowego, w których można było ustawić opływanie wstawionych obrazów tekstem:

W praktyce metoda ta polega na tym, iż wszystkie bloki, które mają być ułożone obok siebie, będą posiadały w swoich klasach CSS dodatkowy atrybut float:left. A następny blok, który już nie ma się układać poziomo, ma posiadać zapis czyszczący opływanie: clear:both;

Atrybut float:left włączył opływanie do lewej strony dla każdego kolejnego bloku, stąd na końcu tego “piętra” trzeba nam jeszcze to opływanie wyłączyć – i dlatego też w stopce pojawił się zapis: clear:both. Oto cała filozofia – to wszystko co trzeba wiedzieć, aby opływania poprawnie użyć.

Zalety podejścia float:left

• Opływanie poprawnie zadziała we wszystkich przeglądarkach internetowych, nawet w IE 6/7 (wspaniała kompatybilność wsteczna);
• Brak jakichkolwiek problemów ze znakami białymi, które to problemy występują w konkurencyjnym podejściu display: inline-block (niewymagane są obejścia bądź hacki likwidujące problem znaków białych).

Wady podejścia float:left

• Zachodzi konieczność wyczyszczenia opływania zapisem clear:both w dodatkowym elemencie blokowym (choć można zapis clear:both umieścić w bloku przewidzianym w layoucie);
• Elementy blokowe z włączonym opływaniem zostają “wyjęte” z naturalnego flow witryny (i dlatego zachodzi konieczność wyłączenia opływania clear: both);
• Rozwiązanie to zostało opracowane na potrzeby opływania obrazów tekstem, i dopiero później zaadoptowane do układania z jego pomocą bloków strukturalnych.