Strona HTML definiuje akapit oraz rysunek. Aby rysunek został umieszczony przez przeglądarkę w tej samej linii co akapit po jego lewej stronie, należy w stylu CSS rysunku zawrzeć własność
A. float: left;
B. style: left;
C. alt: left;
D. align: left;
Pytanie z egzaminu CKE, czerwiec 2017 (arkusz E.14-X-17.06).
Własność float: left; jest tutaj właściwa, bo w CSS służy do ustawiania elementu przy lewej krawędzi kontenera i pozwala, żeby treść znajdująca się obok opływała ten element. W praktyce, jeżeli rysunek ma pojawić się po lewej stronie akapitu, a tekst akapitu ma układać się w tej samej linii obok niego, stosuje się właśnie pływanie elementu. Typowy zapis wyglądałby np. tak: img { float: left; margin-right: 10px; }. Ten dodatkowy margines po prawej stronie jest dobrą praktyką, bo bez niego tekst może przykleić się do obrazka i wygląda to po prostu słabo. Moim zdaniem float warto znać, mimo że w nowoczesnych układach częściej używa się Flexboxa albo CSS Grid. Float nadal spotyka się w starszych stronach, szablonach CMS i zadaniach egzaminacyjnych. Trzeba też pamiętać, że element pływający wypada częściowo z normalnego przepływu dokumentu, więc czasem trzeba zastosować clear: both; albo technikę clearfix, aby kolejne bloki nie nachodziły dziwnie na układ strony.
W tym zadaniu chodzi o właściwość CSS odpowiedzialną za opływanie elementu przez tekst, a nie tylko o ogólne ustawienie czegoś po lewej stronie. Częsty błąd polega na tym, że samo słowo left kojarzy się z wyrównaniem, więc łatwo wybrać zapis, który brzmi intuicyjnie, ale nie istnieje jako poprawna własność CSS dla takiego efektu. align: left; nie jest standardową właściwością CSS służącą do pozycjonowania obrazka obok akapitu. Dawniej w HTML spotykało się atrybut align przy obrazkach, ale to jest przestarzałe podejście i nie powinno się go mieszać z nowoczesnym CSS. Stylowanie powinno być oddzielone od struktury dokumentu, czyli wygląd definiujemy w CSS, a treść i semantykę w HTML. Zapis style: left; również nie ma sensu jako deklaracja CSS. style to atrybut HTML, w którym można umieścić deklaracje CSS, na przykład style='float: left;', ale samo style nie jest właściwością sterującą położeniem elementu. alt: left; to jeszcze inna pomyłka, bo alt dotyczy tekstu alternatywnego obrazka, czyli informacji wyświetlanej lub odczytywanej wtedy, gdy grafika nie może zostać załadowana albo użytkownik korzysta z czytnika ekranu. Alt jest ważny dla dostępności i SEO, ale nie przesuwa rysunku. Poprawnym mechanizmem w tym klasycznym układzie jest float: left;, ewentualnie uzupełniony marginesami i późniejszym czyszczeniem opływania.