Na ilustracji przedstawiono kompozycję bloków strony www. Który z elementów formatowania strony odpowiada temu układowi? (Dla uproszczenia pominięto właściwości dotyczące koloru tła, wysokości oraz czcionki)
Odpowiedź B jest naprawdę na czasie! Widzisz, użyto tutaj techniki pływającego układu z CSS, czyli float i clear. Pierwszy blok pływa w lewo, ma 30% szerokości, dzięki czemu obok niego mogą stać drugi i trzeci blok, które też pływają w lewo i zajmują 70%. To pozwala na ułożenie elementów w jednej linii, o ile kontener ma wystarczająco miejsca. W sumie, float to klasyka przy układach wielokolumnowych, chociaż obecnie sporo osób korzysta z Flexboxa lub Grid Layout. Zauważ, że blok czwarty ma clear:both, więc zacznie się poniżej wcześniejszych elementów pływających. To ważne, bo dzięki temu unikamy problemów z nałożeniem się treści. Zachowanie porządku w układzie jest kluczowe, szczególnie w responsywnym web designie. Tego typu układy są całkiem popularne na stronach z wieloma kolumnami, gdzie elastyczność szerokości ma duże znaczenie.
Jeśli chodzi o inne odpowiedzi, to niestety mają spore błędy. W odpowiedzi A zastosowano clear:both dla drugiego bloku, co sprawia, że ten blok wyląduje poniżej pierwszego, a nie obok. To uniemożliwia uzyskanie układu wielokolumnowego, a to dość powszechny błąd, gdy korzysta się z float. Z kolei odpowiedź C całkowicie pomija użycie float, ustawiając tylko szerokość elementów. Bez float lub innego sposobu na układ w poziomie, elementy będą się ustawiać jeden pod drugim, co nie jest tym, czego byśmy chcieli. Odpowiedź D używa float dla bloku czwartego, co sprawia, że wyświetli się obok pierwszych bloków, zamiast pod nimi, co burzy strukturę strony. Takie błędne użycie CSS prowadzi do chaosu wizualnego i utrudnia nawigację użytkownikowi, a w perspektywie przyszłego zarządzania kodem HTML i CSS może być kłopotliwe. Dlatego warto zrozumieć, jak działają właściwości float i clear oraz ich interakcje w kontekście całego układu, co jest istotne w projektach, które chcą być przejrzyste i responsywne.