Dokument HTML określa akapit oraz grafikę. Aby grafika była umieszczona przez przeglądarkę w tej samej linii co akapit po jego lewej stronie, w stylu CSS grafiki należy ustawić właściwość

Właściwość CSS 'float:left;' jest kluczowa dla umieszczania elementów w linii obok siebie. Umożliwia ona 'wypływanie' elementu, jakim jest obrazek, w lewo, co skutkuje tym, że tekst w akapicie będzie go otaczał od prawej strony. Jest to szczególnie przydatne w projektowaniu responsywnych układów stron internetowych, gdzie zachowanie porządku w rozmieszczeniu elementów jest istotne zarówno na desktopach, jak i urządzeniach mobilnych. Przykładowo, jeśli mamy akapit z opisem produktu, który chcemy wizualnie wzbogacić odpowiednim zdjęciem z jego lewej strony, zastosowanie 'float:left;' w stylach CSS sprawi, że tekst będzie płynnie dostosowywał się do rozmiaru obrazka. Zgodnie z dobrymi praktykami, warto również pamiętać o zastosowaniu 'clear:both;' w przypadku elementów, które mają pojawić się poniżej zaganianych elementów, aby uniknąć problemów z układem. Dodatkowo, warto zadbać o odpowiednie wymiary obrazka oraz użycie atrybutu 'alt' w tagu , aby poprawić dostępność strony oraz jej SEO.