Struktura witryny: Metoda float:left w połączeniu z clear:both

Do zbudowania szkieletu współczesnej witryny internetowej używamy tak zwanych znaczników strukturalnych. Klasycznym przykładem takiego znacznika jest <div> (od ang. divide = podział strony). Divy nazywane są też często elementami blokowymi, albo wprost - blokami. Element blokowy ma to do siebie, że zawsze układa się pod poprzedzającym go elementem. Na przykład: mamy w kodzie witryny dwa divy: czerwony i niebieski. Nawet jeżeli ten pierwszy blok zajmuje jedynie 30% dostępnego na ekranie miejsca, to i tak następny, niebieski div, ułoży się domyślnie pod czerwonym. Pomimo, że zmieściłby się obok, to i tak ułoży się pod poprzednim - tak właśnie domyślnie zachowują się elementy blokowe:


<div class="czerwony"></div> <div class="niebieski"></div>

Rezultat w przeglądarce:

Oczywiście możemy wpłynąć na te bloki odpowiednimi zapisami w CSS, tak aby mogły układać się także obok siebie (pełniej zapełniając przestrzeń okna przeglądarki) i właśnie tego dziś się nauczymy. Nie można przecież skutecznie budować interfejsów witryn, wiedząc jedynie, jak układać bloki jeden pod drugim.

Istnieją dwie uznane metody układania bloków obok siebie – jedna wymaga użycia w stylach tzw. opływania float:left połączonego z jego wyczyszczeniem clear:both, zaś w drugiej używamy zapisu display: inline-block. W tym wpisie poznamy pierwszy sposób, metodę drugą znajdziesz w tym artykule w serii HTML. Możesz też zobaczyć układanie bloków obiema metodami w następującym tutorialu video.

Metoda float:left w połączeniu z clear:both

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:

opływanie

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 CSS, który przywróci pierwotne, blokowe opływanie: clear:both

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, a dopiero później zaadoptowane do układania z jego pomocą bloków strukturalnych.

Aby zobaczyć układanie bloków tą metodą w tutorialu video, wystarczy przepracować następujący fragment we wspomnianym wcześniej w artykule filmie.

Zobacz także

Daj się zaskoczyć! Poniżej wylosowałem dla Ciebie pięć wpisów z innych kategorii blogowych aniżeli ta, którą właśnie przeglądasz:

Polecamy: Sekurak Academy 2024

Sekurak Academy 2024

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp do materiałów z edycji Sekurak Academy z roku 2023! Przy zakupie możecie skorzystać z kodu: pasja-akademia w koszyku, uzyskując rabat -30% na bilety w wersji "Standard" - warto korzystać! Więcej szczegółów znajdziecie tutaj.

Książka: Wprowadzenie do bezpieczeństwa IT

Wprowadzenie do bezpieczeństwa IT

Niedawno wystartował dodruk świetnej, rozchwytywanej książki pt. "Wprowadzenie do bezpieczeństwa IT, Tom I" (około 940 stron). Mamy dla Was kod: pasja (wpisz go w koszyku), dzięki któremu otrzymacie 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla naszych Widzów! Jest to pierwszy tom serii o ITsec, który wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

Pomóż dzieciom

Polska Akcja Humanitarna od wielu lat dożywia dzieci. Proszę, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękuję!

Komentarze

Disqus

Kategorie wpisów

Oto polecana książka warta Waszej uwagi.
Pełna lista polecanych książek jest tutaj.

WIELKANOCNY KIERMASZ 2024! W dniach od 26.03.2024 do 01.04.2024 trwa w Helionie duża świąteczna promocja. Przeceniono tysiące książek, ebooków i kursów video, a rabaty sięgają do -98%. Zobacz promocję w: helion.pl (książki techniczne), ebookpoint.pl (książki rozwojowe i fabularne), videopoint.pl (kursy video).

Bądź na bieżąco