Witryna internetowa ma mieć przedstawioną strukturę bloków. Aby uzyskać ten układ, należy znacznikom sekcji przypisać właściwości w następujący sposób:
A. float tylko dla bloków: 3, 4; clear dla bloku 5
B. float tylko dla bloków: 2, 3, 4; clear dla bloku 5
C. float tylko dla bloku 5; clear dla bloku 2
D. float tylko dla bloku 2; clear dla bloków: 3, 4
Pytanie z egzaminu CKE, styczeń 2020 (arkusz EE.09-SG-20.01).
Ten układ wynika z klasycznego działania opływania elementów w CSS. Blok 1 zostaje zwykłym elementem blokowym na całą szerokość, więc tworzy nagłówek. Następnie bloki 2, 3 i 4 trzeba wyjąć z normalnego przepływu dokumentu przez float, najczęściej float: left, aby mogły ustawić się obok siebie w jednym pasie strony. Blok 2 zajmuje lewą kolumnę, a bloki 3 i 4 tworzą prawą kolumnę, przy czym mają tak dobrane szerokości i wysokości, żeby blok 4 znalazł się pod blokiem 3. Ważny jest blok 5: on ma być stopką na całą szerokość pod częścią pływającą, więc musi dostać clear, zwykle clear: both. Bez tego stopka mogłaby wejść obok elementów pływających albo przykleić się w dziwnym miejscu. Z mojego doświadczenia to jeden z typowych momentów, gdzie widać różnicę między normalnym układem blokowym a układem opartym o float. W praktyce dziś częściej używa się flexboxa lub CSS Grid, bo są czytelniejsze i bardziej przewidywalne, ale znajomość float i clear nadal jest potrzebna przy starszych szablonach oraz na egzaminach zawodowych. Dobra praktyka jest taka: float stosujemy tylko tam, gdzie elementy mają się ustawić obok siebie, a clear tam, gdzie następny fragment strony ma zacząć się poniżej tych pływających elementów.
W tym zadaniu łatwo pomylić samo położenie elementu na rysunku z mechanizmem, który w CSS je tworzy. Jeżeli float zostałby przypisany tylko blokowi 5, to stopka zaczęłaby zachowywać się jak element pływający, a to jest odwrotność potrzebnego efektu. Blok 5 ma zamykać układ i wejść pod wszystkie pływające kolumny, dlatego potrzebuje clear, a nie float. Równie problematyczne jest ustawienie clear dla bloku 2. Ten blok nie ma zaczynać się pod wcześniejszymi pływającymi elementami, tylko ma stanowić lewą część środkowego obszaru, więc powinien uczestniczyć w układzie kolumnowym. Jeśli float dostaną tylko bloki 3 i 4, a blok 2 pozostanie zwykłym elementem blokowym, przeglądarka potraktuje go jako element zajmujący domyślnie całą dostępną szerokość. Wtedy prawa kolumna nie ułoży się poprawnie obok niego, albo układ zacznie zależeć od przypadkowych wymiarów i kolejności w kodzie. Clear na bloku 5 jest akurat dobrym kierunkiem, ale nie wystarczy, jeśli wcześniej nie zostały prawidłowo ustawione wszystkie elementy kolumnowe. Błędne jest też myślenie, że wystarczy nadać float tylko blokowi 2, a bloki 3 i 4 wyczyścić przez clear. Clear powoduje zejście poniżej elementów pływających, więc bloki 3 i 4 nie stworzyłyby prawej kolumny obok bloku 2, tylko zostałyby wypchnięte niżej. Moim zdaniem najważniejsza zasada do zapamiętania jest prosta: elementy stojące obok siebie w danym poziomie zwykle muszą pływać razem, a element kończący taki fragment strony powinien wyczyścić opływanie. W nowoczesnym CSS zrobiłbym taki układ przez grid-template-areas, ale przy float właściwa logika to float dla bloków 2, 3 i 4 oraz clear dla bloku 5.