Miniatura artykułu przylega do lewej krawędzi, a tekst układa się obok niej, lecz następny blok wskakuje w to samo miejsce. W takiej sytuacji float CSS może być właściwym narzędziem, o ile problemem jest opływanie elementu przez tekst, a nie budowa całego układu strony.
Float służy do opływania treści, a nie do budowania całego layoutu
- float: left i float: right ustawiają element przy krawędzi, obok której może płynąć tekst.
- Flexbox sprawdza się przy układaniu elementów w jednym wymiarze, a Grid przy siatce wierszy i kolumn.
- clear zatrzymuje opływanie przy kolejnym elemencie.
- display: flow-root pomaga kontenerowi objąć wysokością pływające dzieci.
- float: inline-start dopasowuje stronę do kierunku pisma.
Float ustawia element z boku, a tekst płynie obok niego
Wyobraź sobie zdjęcie w artykule, które ma zajmować lewą część akapitu, podczas gdy tekst opływa je z prawej. Właśnie do takiego efektu służy właściwość float: przesuwa element ku lewej lub prawej krawędzi kontenera, pozwalając treści tekstowej układać się przy jego boku.
Najprostszy przykład wygląda tak:
.article-image {
float: left;
width: 12rem;
margin: 0 1rem 0.75rem 0;
}Wartość left oznacza lewą stronę, right prawą, a none wyłącza opływanie. Właściwość float nie centruje elementu i nie ustawia go precyzyjnie w dowolnym miejscu; wpływa na to, jak układa się obok niego zawartość. Tak opisuje ją dokumentacja MDN dotycząca właściwości float.
To rozróżnienie oszczędza sporo poprawiania CSS. Jeśli chcesz, by tekst opływał obraz albo niewielki panel, float pasuje do zadania; jeśli ustawiasz obok siebie przyciski, karty lub kolumny, wybierz inny model układu.
Do kolumn wybierz Flexbox albo Grid, nie float
Układ dwóch kolumn może wyglądać poprawnie przy użyciu float, dopóki nie zmieni się treść, szerokość ekranu albo kolejność elementów. Właśnie wtedy ręczne kontrolowanie szerokości, odstępów i czyszczenia opływania zaczyna przeszkadzać. Uważam, że float warto zostawić do opływania treści, a strukturę interfejsu budować Flexboksem lub Gridem.
| Sytuacja | Lepsze narzędzie | Powód |
|---|---|---|
| Tekst ma opływać ilustrację w artykule | float |
Tekst może układać się przy boku elementu i poniżej niego. |
| Elementy mają tworzyć pasek, na przykład przyciski w nagłówku | display: flex |
Flexbox porządkuje elementy w jednym wymiarze i pozwala kontrolować odstępy. |
| Strona ma mieć wiersze i kolumny kart | display: grid |
Grid daje kontrolę nad układem w dwóch wymiarach. |
| Kolejny blok ma zaczynać się pod pływającym elementem | clear |
Blok przestaje układać się przy elemencie float. |
Praktyczna decyzja jest prosta: opływanie tekstu oznacza float; układ komponentów oznacza Flexbox albo Grid. Materiał edukacyjny MDN o float również wskazuje, że ta technika wróciła do pierwotnego zadania, gdy Flexbox i Grid przejęły budowanie typowych layoutów.
clear kończy opływanie, a flow-root naprawia wysokość kontenera
Najczęstszy zgrzyt pojawia się pod krótkim akapitem: nagłówek, przycisk albo kolejny tekst wsuwa się obok obrazka. Jeśli ten element ma rozpocząć nowy fragment poniżej float, dodaj clear:
.next-section {
clear: both;
}clear: left zatrzymuje opływanie elementów pływających w lewo, clear: right tych po prawej, a clear: both uwzględnia obie strony. To ustawienie dotyczy wskazanego elementu; samo z siebie nie sprawia, że kontener obejmie wysokością swoje pływające dzieci.
Gdy tło lub obramowanie rodzica kończy się przed pływającym obrazem, użyj display: flow-root na kontenerze:
.article-copy {
display: flow-root;
}flow-root tworzy nowy kontekst formatowania blokowego, dzięki czemu kontener obejmuje pływające elementy bez dodatkowego pseudo-elementu clearfix. To rozwiązanie opisuje dokumentacja MDN właściwości clear, a szczegóły mechanizmu wyjaśnia materiał o kontekście formatowania blokowego.
Float logiczny lepiej znosi zmianę kierunku tekstu
W polskim interfejsie float: left zwykle ustawia element po lewej, ale taki zapis opisuje fizyczną stronę ekranu. Przy obsłudze języków pisanych od prawej do lewej trzeba brać pod uwagę kierunek tekstu, inaczej obraz może zostać po niewłaściwej stronie.
W takim przypadku można użyć wartości logicznych:
.article-image {
float: inline-start;
margin-inline-end: 1rem;
}inline-start oznacza początek kierunku pisma, a inline-end jego koniec. Dla tekstu pisanego od lewej do prawej pierwsza wartość wskazuje lewą stronę; przy kierunku od prawej do lewej wskazuje prawą. To drobna zmiana, która pozwala uniknąć osobnych reguł dla obu kierunków.
Diagnozuj efekt po tym, co dzieje się z tekstem i rodzicem
Gdy float zachowuje się inaczej, niż zakładasz, najpierw ustal, czy problem dotyczy opływania, kolejnego elementu, czy wysokości kontenera. Te trzy objawy mają różne przyczyny, więc jedna przypadkowa poprawka często przenosi problem zamiast go rozwiązać.
| Sytuacja lub objaw | Prawdopodobna przyczyna | Co zrobić |
|---|---|---|
| Kolejny nagłówek pojawia się obok obrazka | Element nagłówka nadal może opływać float. | Dodaj clear: both do nagłówka lub jego kontenera. |
| Tło rodzica nie obejmuje obrazu | Pływające dziecko nie zwiększa zwykłej wysokości rodzica. | Ustaw display: flow-root na rodzicu. |
| Kilka elementów układa się w nieprzewidywalne kolumny | Float został użyty do budowy layoutu zamiast do opływania treści. | Zbuduj układ za pomocą Flexboxa lub Grida. |
| Obraz znajduje się po złej stronie w wersji językowej | Reguła używa fizycznej wartości left lub right. |
Rozważ inline-start albo inline-end. |
Ta kolejność diagnozy pomaga uniknąć popularnego odruchu, czyli dodawania kolejnych szerokości i marginesów, gdy faktyczny problem leży w przepływie treści. Najpierw popraw regułę odpowiadającą objawowi, a dopiero potem dopracuj odstępy.
Float zostaw tam, gdzie tekst naprawdę ma opływać element
Jeśli akapit ma płynąć wokół ilustracji, float nadal jest zwięzłym i czytelnym rozwiązaniem. Gdy celem jest rozmieszczenie kart, menu albo kolumn, wybór Flexboxa lub Grida zwykle daje prostsze reguły i mniej niespodzianek przy zmianie treści.
Wróć więc do początkowej sytuacji z miniaturą i kolejnym blokiem: dla samego opływania ustaw float, dla elementu, który ma zejść pod obraz, dodaj clear, a gdy kontener nie obejmuje grafiki, zastosuj flow-root. Tak rozdzielone zadania sprawiają, że CSS pozostaje czytelny także wtedy, gdy artykuł urośnie.
