Strona HTML definiuje rysunek, któremu w stylu CSS nadano własność float: left;, oraz następujący po nim akapit. Aby akapit nie opływał rysunku, lecz rozpoczynał się dopiero pod nim, należy w stylu CSS akapitu zawrzeć własność
A. float: none;
B. position: static;
C. display: inline;
D. clear: both;
W tym układzie chodzi o mechanizm czyszczenia opływania, czyli własność clear. Jeżeli rysunek ma ustawione float: left;, to zostaje wyjęty z normalnego przepływu dokumentu i kolejne elementy blokowe, na przykład akapit, mogą ustawiać swoją treść obok niego. Dlatego sam akapit nie zacznie się automatycznie pod obrazkiem, tylko tekst będzie go opływał z prawej strony. Deklaracja clear: both; mówi przeglądarce, że dany element nie może znajdować się obok elementów pływających ani z lewej, ani z prawej strony. W praktyce akapit zostanie przesunięty w dół, poniżej rysunku. Można to zapisać np. tak: p { clear: both; }. Moim zdaniem to jedna z tych własności CSS, które warto dobrze kojarzyć, bo często pojawia się w starszych układach stron, galeriach, artykułach z ilustracjami i prostych szablonach. W nowoczesnym CSS częściej używa się Flexboxa albo CSS Grid do budowy layoutu, ale float nadal jest poprawnym mechanizmem, szczególnie do opływania obrazów tekstem. Dobra praktyka jest taka, żeby clear stosować tam, gdzie naprawdę chcemy zakończyć działanie opływania, a nie próbować naprawiać układu przypadkowymi zmianami display albo position.
W tej sytuacji problem nie polega na tym, że akapit sam ma zostać pozbawiony pływania, tylko na tym, że znajduje się po elemencie z float: left; i dlatego jego zawartość może wejść obok rysunku. Własność float: none; ustawiona na akapicie nie rozwiązuje sprawy, bo akapit domyślnie i tak nie jest elementem pływającym. Ona mówi jedynie, że dany element nie ma pływać, ale nie nakazuje mu ominąć wcześniejszych elementów z float. To częsty błąd myślowy: skoro problem wywołał float, to próbujemy wyłączyć float na następnym elemencie, a tutaj potrzebne jest czyszczenie opływania. Z kolei display: inline; zmieniłoby sposób wyświetlania akapitu na liniowy, co wręcz pogorszyłoby semantykę i zachowanie elementu. Akapit jest naturalnie elementem blokowym i w większości przypadków powinien nim zostać, bo tekst ma zajmować osobny blok treści. Position: static; też nie ma tu praktycznego znaczenia, ponieważ jest domyślną wartością pozycjonowania większości elementów HTML. Ta deklaracja nie wpływa na relację z elementami pływającymi i nie usuwa opływania. W CSS trzeba rozróżniać trzy różne mechanizmy: float odpowiada za pływanie elementu, display za typ pudełka w modelu formatowania, a position za pozycjonowanie. Do zatrzymania opływania służy clear, najlepiej w tym przypadku clear: both;, bo działa niezależnie od tego, czy wcześniejszy element pływał z lewej, z prawej, czy layout później został lekko zmieniony. Z mojego doświadczenia taka deklaracja jest bardziej odporna na drobne poprawki w kodzie i łatwiejsza do zrozumienia dla osoby, która potem utrzymuje stronę.