Efekt "opływania obrazu tekstem" w CSS najczęściej realizuje się przez zastosowanie właściwości float na elemencie z obrazem. Gdy element ma ustawione float: right;, jest odsuwany do prawej krawędzi swojego kontenera (w ramach dostępnej szerokości), a treść tekstowa, która następuje w kodzie HTML, układa się obok niego i w razie potrzeby przechodzi do kolejnych linii, omijając obszar zajęty przez obraz.
Dlatego odpowiedź "float: right;" pasuje do sytuacji, w której grafika ma znajdować się po prawej stronie, a tekst ma ją opływać z lewej i poniżej. Jest to klasyczne rozwiązanie spotykane w artykułach, wpisach blogowych i opisach produktów.
Pozostałe propozycje nie spełniają tego celu:
- "table: left;" nie jest poprawną deklaracją CSS dla opływania. W CSS nie istnieje standardowa właściwość table ustawiana na left/right w tym znaczeniu; takie polecenie nie zrealizuje opływania.
- "clear: both;" dotyczy czyszczenia opływania. Używa się go zwykle na elemencie, który ma rozpocząć się poniżej elementów pływających (lewych/prawych), np. aby stopka lub kolejna sekcja nie "wchodziła" obok obrazka. To więc mechanizm kończenia/omijania float, a nie tworzenia opływania.
- "float: left;" także tworzy opływanie, ale po przeciwnej stronie: element trafia do lewej, a tekst opływa go z prawej. Jest poprawny tylko wtedy, gdy grafika ma być po lewej stronie.
W praktyce przy float warto pamiętać o typowych konsekwencjach: elementy pływające mogą wpływać na wysokość kontenera (czasem potrzebne bywa "czyszczenie" lub inne techniki), a w nowoczesnych layoutach często zastępuje się float rozwiązaniami typu Flexbox/Grid. Jednak do samego zjawiska opływania w treści dokumentu float pozostaje podstawową i zrozumiałą metodą.
