Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Jak za pomocą CSS ustawić opływanie obrazu tekstem, wprowadzając odpowiedni kod w stylu obrazu?
Odpowiedzi
Informacja zwrotna
Właściwość float: right; w CSS to naprawdę fajne narzędzie, bo pozwala na umieszczenie rzeczy, jak na przykład obrazek, z prawej strony kontenera. Dzięki temu tekst ładnie opływa go z lewej strony, co jest super w responsywnych projektach. Często to widzę na stronach, gdzie musimy dostosować układ do różnych ekranów. Użycie float: right; zgodne jest z dobrymi praktykami CSS i daje nam większą kontrolę nad tym, jak wygląda strona. Przykładowo, w artykułach, gdzie obrazki są często po jednej stronie tekstu, float naprawdę ułatwia życie. Tylko pamiętaj, żeby używać clearfix, bo elementy pływające mogą czasami zamieszać w układzie. Dobrze jest też wiedzieć, że float zmienia sposób, w jaki przeglądarka wyświetla elementy, więc znajomość jego wpływu na model pudełkowy CSS jest bardzo ważna. Dzięki float: right; możemy ładnie oprawić tekst wokół obrazków w blogach, co sprawia, że wygląda to estetycznie i jest bardziej czytelne.
Stosowanie table: left; w tym kontekście to strzał w kolano, bo taka właściwość nie istnieje. W CSS do tabel używamy innych właściwości jak display: table; lub display: table-cell;, ale nie do opływania elementów. A clear: both; jest używane, żeby zlikwidować opływ po float, więc to ważna sprawa, bo inaczej wszystko się sypie. Float: left; może opływać, ale w tej sytuacji nie postawi obrazka po prawej, bo ustawia go po lewej stronie. Wiele osób myśli, że float działa na osi Y, ale tak naprawdę dotyczy tylko osi X. Pamiętaj, że float, chociaż przydatny, to nie jedyny sposób na układanie elementów w CSS. Flexbox i grid to nowoczesne metody, które często są znacznie lepsze. By zbudować ładne interfejsy, musimy rozumieć jak różne właściwości CSS ze sobą współpracują.