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

Zachowanie elementów blokowych

Mirosław Zelent

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>

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.