Układ na schemacie to klasyczny layout oparty o float: dwa elementy w pierwszym wierszu (blok 1 i 2), dwa w drugim (blok 3 i 4) oraz element kończący układ poniżej (blok 5) na pełną szerokość.
W technice float, aby elementy mogły ustawić się obok siebie, nadaje się im float: left. Dlatego bloki 1–4 powinny mieć float: left (przy założeniu, że ich szerokości są tak dobrane, by mieściły się w kontenerze po dwa w wierszu).
Problem pojawia się przy bloku 5. Jeśli blok 5 także otrzymałby float: left, stałby się elementem pływającym i mógłby próbować ustawić się obok poprzednich pływających bloków (np. obok bloku 3 lub 4, jeśli pozostałaby wolna przestrzeń). To kłóci się z intencją "stopki" zajmującej całą szerokość.
Właśnie do takiej sytuacji służy właściwość clear. Ustawienie clear: both na bloku 5 wymusza, aby jego górna krawędź znalazła się poniżej wszystkich elementów pływających (zarówno z lewej, jak i prawej strony). Dzięki temu blok 5 zaczyna się w nowej linii i może rozciągnąć się na pełną szerokość kontenera (zgodnie z nadaną szerokością).
Dlaczego pozostałe odpowiedzi są błędne?
- "float: left dla wszystkich bloków." — błędne, bo obejmuje również blok 5; stopka nie powinna pływać, tylko zejść pod wcześniejsze floater’y.
- "clear: both dla wszystkich bloków." — spowoduje, że każdy blok będzie zaczynał się poniżej poprzednich pływających elementów, więc bloki nie ustawią się obok siebie w wierszach.
- "clear: both dla bloku 5 oraz float: left jedynie dla 1 i 2 bloku." — brakuje float dla bloków 3 i 4, więc nie utworzą drugiego wiersza w dwóch kolumnach.
W praktyce, przy układach float często spotyka się także technikę "clearfix" dla rodzica, ale w tym zadaniu kluczowe jest zrozumienie roli clear: both na elemencie kończącym układ.
