Wskaż kod CSS odpowiadający układowi bloków 2 - 5, zakładając, że są one zbudowane w oparciu o przedstawiony kod HTML.
| BLOK 1 | ||
| BLOK 2 | BLOK 3 | BLOK 4 |
| BLOK 5 | ||
<div id="pierwszy">BLOK 1</div> <div id="drugi">BLOK 2</div> <div id="trzeci">BLOK 3</div> <div id="czwarty">BLOK 4</div> <div id="piaty">BLOK 5</div>
Kod 1.#drugi { float: left; width: 40%; } #trzeci { float: left; width: 30%; } #czwarty { float: right; width: 30%; } #piaty { clear: both; width: 30%; } | Kod 2.#drugi { float: left; width: 40%; } #trzeci { float: left; width: 30%; } #czwarty { float: right; width: 30%; } #piaty { float: left; width: 30%; } |
Kod 3.#drugi { float: left; width: 40%; } #trzeci { float: left; width: 30%; } #czwarty { width: 30%; } #piaty { float: right; width: 30%; } | Kod 4.#drugi { float: left; width: 40%; } #trzeci { width: 30%; } #czwarty { width: 30%; } #piaty { float: right; width: 30%; } |
Kod 2 jest właściwy, bo wykorzystuje opływanie elementów w taki sposób, żeby bloki 2–5 ustawiły się jak w pokazanym układzie tabelarycznym. #drugi ma float: left i width: 40%, więc zajmuje lewą kolumnę. #trzeci także ma float: left oraz width: 30%, dlatego ustawia się obok bloku drugiego, w środkowej kolumnie. #czwarty ma float: right i width: 30%, więc trafia na prawą stronę tego samego pasa układu. Suma szerokości to 40% + 30% + 30% = 100%, więc wypełnia się cała dostępna szerokość kontenera. #piaty również ma float: left i width: 30%, ale ponieważ w pierwszym rzędzie nie ma już miejsca, przeskakuje niżej i zajmuje wolną przestrzeń pod blokiem trzecim, między lewym i prawym pływającym blokiem. To jest właśnie zachowanie, którego oczekujemy w tym zadaniu. W praktyce takie układy kiedyś często budowało się na float, np. przy prostych szablonach stron z kolumnami. Dzisiaj, moim zdaniem, lepszą praktyką branżową jest użycie CSS Grid albo Flexbox, bo są czytelniejsze i mniej podatne na dziwne efekty uboczne. Ale do zrozumienia starszych projektów WWW float nadal warto znać bardzo dobrze.
W tym zadaniu kluczowe jest zrozumienie, że układ ma przypominać trzy kolumny: lewa kolumna ma 40%, środkowa 30%, prawa 30%, a blok piąty ma znaleźć się pod blokiem trzecim, nie pod całym układem. Przy float liczy się nie tylko sama szerokość elementów, ale też kolejność w kodzie HTML i to, czy element dalej opływa poprzednie bloki, czy przerywa opływanie.
Jeżeli dla bloku piątego zastosuje się clear: both, to taki element nie będzie próbował wejść w wolne miejsce pod blokiem trzecim. Zostanie przesunięty poniżej wszystkich pływających elementów po lewej i prawej stronie. To psuje układ, bo blok 5 ma być w środkowej kolumnie, a nie dopiero pod blokiem 2 i 4. To częsty błąd: ktoś widzi problem z floatami i automatycznie dopisuje clear, a tutaj właśnie nie o to chodzi.
Nie działa też podejście, w którym blok czwarty nie jest pływający. Zwykły element blokowy w normalnym przepływie dokumentu nie zachowuje się tak samo jak float: right. Może być wypychany przez elementy pływające, jego linie tekstu będą reagować na floaty, ale sam blok nie stanie się prawą kolumną zgodną z rysunkiem. Podobnie, gdy tylko blok drugi jest floatem, a trzeci i czwarty zostają zwykłymi blokami, to nie powstaje stabilny układ trzech kolumn. Elementy blokowe domyślnie układają się jeden pod drugim, więc samo width: 30% nie wystarcza, żeby ustawić je obok siebie. Z mojego doświadczenia to jedna z najczęstszych pułapek w CSS: szerokość elementu nie oznacza jeszcze, że element stanie obok innego. Potrzebny jest odpowiedni mechanizm układu, tutaj float, a we współczesnym CSS najczęściej flex albo grid.
Jeżeli dla bloku piątego zastosuje się clear: both, to taki element nie będzie próbował wejść w wolne miejsce pod blokiem trzecim. Zostanie przesunięty poniżej wszystkich pływających elementów po lewej i prawej stronie. To psuje układ, bo blok 5 ma być w środkowej kolumnie, a nie dopiero pod blokiem 2 i 4. To częsty błąd: ktoś widzi problem z floatami i automatycznie dopisuje clear, a tutaj właśnie nie o to chodzi.
Nie działa też podejście, w którym blok czwarty nie jest pływający. Zwykły element blokowy w normalnym przepływie dokumentu nie zachowuje się tak samo jak float: right. Może być wypychany przez elementy pływające, jego linie tekstu będą reagować na floaty, ale sam blok nie stanie się prawą kolumną zgodną z rysunkiem. Podobnie, gdy tylko blok drugi jest floatem, a trzeci i czwarty zostają zwykłymi blokami, to nie powstaje stabilny układ trzech kolumn. Elementy blokowe domyślnie układają się jeden pod drugim, więc samo width: 30% nie wystarcza, żeby ustawić je obok siebie. Z mojego doświadczenia to jedna z najczęstszych pułapek w CSS: szerokość elementu nie oznacza jeszcze, że element stanie obok innego. Potrzebny jest odpowiedni mechanizm układu, tutaj float, a we współczesnym CSS najczęściej flex albo grid.