KWALIFIKACJA INF3 - CZERWIEC 2023 (test 2)

PYTANIE NR 27.
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 dla bloków: 1, 2,
3, 4 (blok 5 nie ma ustawionej szerokości), powinno zawierać właściwość
Ilustracja przedstawia schemat układu bloków witryny internetowej, co jest związane z kwalifikacją zawodową technika
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Aby ułożyć bloki 1–4 obok siebie, typowo stosuje się opływanie, więc dla tych bloków potrzebna jest właściwość ustawiająca je "w jednej linii". Następnie blok 5 ma znaleźć się poniżej całego rzędu, więc musi przerwać opływanie wcześniejszych elementów właściwością czyszczącą (clear).

Pełne wyjaśnienie:

W układach opartych o opływanie elementy, które mają ustawić się obok siebie w jednym wierszu, zwykle otrzymują regułę opływania. Dzięki temu przestają zachowywać się jak typowe elementy blokowe zajmujące całą dostępną szerokość w normalnym przepływie dokumentu i mogą "ustawić się" w poziomie (o ile suma ich szerokości na to pozwala).

Jeżeli w projekcie występują cztery bloki (1–4) tworzące rząd, to logiczne jest zastosowanie opływania dla każdego z nich, aby mogły tworzyć wspólną linię. Samo przypisanie szerokości blokom 1–4 nie gwarantuje ułożenia w jednym wierszu w normalnym przepływie – szerokość ogranicza rozmiar, ale bez opływania (lub innej metody układu) elementy blokowe nadal będą przechodzić do kolejnej linii.

Blok 5 ma inną rolę: powinien znaleźć się poniżej całego rzędu bloków 1–4. W układzie z opływaniem bez "czyszczenia" może on próbować ustawić się obok pływających elementów lub "podciągnąć się" w wolne miejsce. Dlatego dla bloku 5 stosuje się regułę czyszczącą, aby rozpoczął się pod elementami pływającymi.

Dlaczego pozostałe propozycje są błędne?

  • Opcja z czyszczeniem dla wszystkich bloków zrywałaby ideę wspólnego rzędu, bo każdy blok byłby wymuszony poniżej poprzednich elementów pływających, zamiast tworzyć jedną linię.
  • Opcja z opływaniem tylko dla bloków 1 i 2 nie tworzy pełnego rzędu 1–4; bloki 3 i 4 pozostałyby w normalnym przepływie i najczęściej spadłyby do kolejnej linii.
  • Opcja z opływaniem dla wszystkich bloków (łącznie z 5) nie gwarantuje, że blok 5 przejdzie poniżej; bez czyszczenia może on próbować ustawić się obok wcześniejszych elementów, jeśli znajdzie miejsce.

Na egzaminie warto zapamiętać prostą zasadę: elementy tworzące kolumny dostają regułę opływania, a element kończący sekcję pod kolumnami dostaje regułę czyszczenia opływania, aby nie "wchodził" w obszar kolumn.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Właściwość opływania powoduje, że element może "ustawić się" przy lewej lub prawej krawędzi, a kolejne treści mogą go opływać. W praktyce bywa używana do układów kolumnowych w starszych projektach, gdzie kilka bloków ma znaleźć się w jednym wierszu.
Czyszczenie opływania wymusza, aby element zaczął się poniżej elementów pływających (opływanych). Stosuje się je np. dla stopki lub bloku końcowego, aby nie "wjechał" obok kolumn z opływaniem i zawsze pojawił się pod nimi.
Element blokowy w normalnym przepływie zajmuje całą dostępną szerokość wiersza, nawet jeśli ma mniejszą ustawioną szerokość. Żeby kilka bloków znalazło się obok siebie, trzeba użyć mechanizmu układu (np. opływania lub innej techniki rozmieszczania).
Gdy wcześniejsze elementy są pływające, a ostatni blok ma rozpocząć się dopiero pod nimi (np. stopka lub kolejna sekcja). Bez czyszczenia może on próbować ustawić się obok kolumn, jeśli w linii zostanie wolne miejsce.
Jeśli na schemacie widzisz kilka bloków obok siebie oraz kolejny blok, który ma być pełną sekcją poniżej, to jest typowy sygnał. Kolumny wymagają opływania, a blok pod spodem powinien przerwać opływanie, aby nie układał się "przy" kolumnach.
To zwykle nie rozwiązuje problemu, bo dolny blok jako pływający nadal może próbować ustawić się obok wcześniejszych elementów, jeśli znajdzie miejsce. W takich układach dolny blok powinien raczej przerwać opływanie niż samemu opływać.
Najczęstsze błędy to: brak czyszczenia opływania dla sekcji pod kolumnami, opływanie tylko części kolumn, oraz założenie, że ustawione szerokości "same" ułożą elementy w jednym wierszu. Skutkiem są stopki w złym miejscu i łamanie układu.
Najważniejsze jest to, które bloki mają być obok siebie, a które poniżej całego rzędu. Jeśli widzisz rząd kilku bloków i kolejny blok pod nimi, musisz dobrać właściwości tak, by rząd powstał (mechanizm układu), a element pod nim rozpoczął się dopiero po zakończeniu rzędu.
Tak, w starszych serwisach nadal można spotkać układy oparte na opływaniu. Technik informatyk często musi je diagnozować i poprawiać, np. gdy dodanie nowego bloku powoduje "wciągnięcie" stopki obok kolumn albo złamanie kolejności sekcji.
Ćwicz interpretację schematów: zaznacz rzędy i elementy "pod spodem". Następnie przypisz im role: elementy w rzędzie wymagają mechanizmu układu, a element kończący sekcję powinien wymusić start poniżej. Ucz się na krótkich przykładach i testuj w przeglądarce.
info

To pytanie poprawnie rozwiązuje 25% zdających egzamin. bardzo trudne

Specjaliści zwracają uwagę: "Aby ułożyć bloki 1–4 obok siebie, typowo stosuje się opływanie, więc dla tych bloków potrzebna jest właściwość ustawiająca je "w jednej linii"."

Źródła:

  • MDN Web Docs: "float" (CSS) — https://developer.mozilla.org/en-US/docs/Web/CSS/float (dostęp: 2026-02-28)
  • MDN Web Docs: "clear" (CSS) — https://developer.mozilla.org/en-US/docs/Web/CSS/clear (dostęp: 2026-02-28)
  • W3C: CSS 2.1 Specification, rozdział 9.5 (Floating boxes) oraz 9.5.2 (Controlling flow next to floats) — https://www.w3.org/TR/CSS21/visuren.html (dostęp: 2026-02-28)

Materiały:

  • Dokumentacja właściwości odpowiadających za opływanie i czyszczenie opływania
  • Ćwiczenia: budowa układu 4 bloków w wierszu + stopka pod spodem
  • Porównanie zachowania układu przy różnych metodach rozmieszczania elementów (historyczne i współczesne)

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego