Na obrazie przedstawiono projekt układu bloków witryny internetowej. Zakładając, że bloki są realizowane za pomocą znaczników sekcji, ich formatowanie w CSS, oprócz ustawionych szerokości, powinno zawierać właściwość
| BLOK 1 | BLOK 2 | ||
| BLOK 3 | BLOK 4 | ||
| BLOK 5 | |||
A. clear: both dla bloku 5 oraz float: left jedynie dla 1 i 2 bloku.
B. clear: both dla wszystkich bloków.
C. float: left dla wszystkich bloków.
D. clear: both dla bloków 1 i 2 oraz float: left dla pozostałych bloków.
Opracowane na podstawie zadania CKE, czerwiec 2024 (arkusz EE.09-SG-24.06): W arkuszu odpowiedź D (clear: both dla bloku 5, float: left dla pozostałych) też dawała ten układ, bo blok 5 zajmuje całą szerokość. Zmieniono ją na jednoznacznie błędną.
Poprawnym ustawieniem jest float: left dla wszystkich bloków. Znaczniki sekcji są domyślnie elementami blokowymi, więc bez dodatkowego formatowania każdy z nich zajmowałby osobny wiersz. Właściwość float: left wyjmuje element z normalnego układu blokowego i dosuwa go do lewej krawędzi, a następne elementy mogą ustawiać się obok, jeśli pozwala na to ich szerokość. Przy szerokościach 50% i 50% bloki 1 i 2 tworzą pierwszy wiersz, przy 25% i 75% bloki 3 i 4 tworzą drugi wiersz, a blok 5 o pełnej szerokości przechodzi pod nie. Do zapamiętania: składnia to float: left;. Typową pułapką jest użycie clear zbyt wcześnie, co przerywa układanie elementów obok siebie.
W tym układzie trzeba odróżnić ustawianie elementów obok siebie od wymuszania przejścia pod elementy pływające. clear: both dla wszystkich bloków spowodowałoby, że każdy blok musiałby znaleźć się poniżej wcześniejszych elementów pływających, więc nie powstałyby pary bloków w jednym wierszu. clear: both dla bloku 5 oraz float: left jedynie dla 1 i 2 bloku ustawiłoby obok siebie tylko górny rząd; bloki 3 i 4 jako zwykłe elementy blokowe nie ułożyłyby się w jednej linii. clear: both dla bloków 1 i 2 oraz float: left dla pozostałych bloków nie tworzy poprawnego pierwszego wiersza, bo bloki 1 i 2 nie są ustawione jako pływające. Poprawna odpowiedź to float: left dla wszystkich bloków. Typowy błąd myślowy polega na traktowaniu clear: both jako polecenia budującego nowy rząd, podczas gdy ono przede wszystkim zatrzymuje opływanie elementów.