Opływanie elementów w CSS

Piszesz artykuł o piramidzie Cheopsa i chcesz, żeby zdjęcie stało przy lewej krawędzi, a tekst układał się obok niego, tak jak w gazecie. Domyślnie obrazek zajmuje własną linię, a akapit zaczyna się dopiero pod nim. Tę układankę rozwiązuje właściwość float.

Opływanie elementów (floating) to technika, która pozwala przesunąć element, na przykład obraz, do lewej albo prawej krawędzi kontenera, a pozostałej treści - opłynąć go z drugiej strony. Dawniej budowano nim też układy wielokolumnowe, ale dziś służą do tego Flexbox i Grid, a float zostaje głównie do opływania obrazków tekstem. Najczęściej używane wartości to left, right i none; nowsze inline-start i inline-end ustawiają element po stronie początku albo końca wiersza (w tekście pisanym od lewej to lewo i prawo).

Wartości float

Oto krótki opis najczęściej używanych wartości:

• float: left - element zostaje przesunięty maksymalnie w lewą stronę swojego kontenera, a pozostałe elementy opływają go z prawej strony.
• float: right - element zostaje przesunięty maksymalnie w prawą stronę swojego kontenera, a pozostałe elementy opływają go z lewej strony.
• float: none - wartość domyślna: element nie opływa, tylko zostaje w normalnym przepływie dokumentu (blok nadal zajmuje całą szerokość, a element liniowy płynie w tekście). Zakaz stawania obok wcześniejszych elementów opływanych daje dopiero właściwość clear.

Przykładowo, jeśli mamy dwa obrazki, z pierwszym ustawionym na float: left, a drugim na float: right, pierwszy stanie przy lewej krawędzi, drugi przy prawej, a tekst ułoży się między nimi.

Tekst opływający obraz

Wróćmy do artykułu o piramidzie. Wystarczy dodać obrazkowi float: left i mały margines z prawej strony, żeby tekst nie przyklejał się do zdjęcia:

<img src="piramida.jpg" alt="Piramida Cheopsa" style="float: left; margin-right: 15px;">
<p>Piramida Cheopsa to największa z piramid w Gizie. Tekst automatycznie opływa obraz, tworząc estetyczny układ.</p>

Obrazek stoi teraz przy lewej krawędzi, a akapit wypełnia miejsce po jego prawej stronie. Pamiętaj o atrybucie alt - opis obrazka przyda się każdemu, kto go nie widzi. Dziś opływanie stosuje się głównie do układania obrazów i tekstu obok siebie; boczne kolumny buduje się Flexboxem lub Gridem.

Właściwość clear

Właściwość clear decyduje, czy element może stanąć obok wcześniejszych elementów opływanych. Można to porównać do kamiennego progu w świątyni: element z clear nie stanie obok posągów ustawionych przy ścianie, tylko pod nimi. Wartość left zabrania sąsiedztwa z elementami opływanymi w lewo, right - w prawo, a both z obu stron.

div {
  clear: both; /* żaden element nie będzie opływał tego diva z lewej ani prawej strony */
}

Typowy przykład to stopka pod artykułem ze zdjęciem. Bez clear stopka mogłaby wjechać obok obrazka, jeśli tekst artykułu jest krótszy niż zdjęcie:

.stopka {
  clear: both;
}

Teraz stopka zawsze zaczyna się pod obrazkiem, nawet gdy akapit skończył się wcześniej.

Kontener, który "zapomina" o obrazku

Opływanie może prowadzić do problemów z układem, gdy kontenery nie rozpoznają opływających elementów jako zajmujących miejsce. Jeśli w ramce z tłem jest tylko obrazek z float, ramka zapada się do zerowej wysokości, a obrazek wystaje poza nią. Klasyczne rozwiązanie to technika zwana "clearfix": pseudo-element na końcu kontenera z deklaracją clear: both.

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

Dodanie klasy clearfix do kontenera opływających elementów zapewni prawidłowe wyświetlanie. Dziś to samo zrobisz jedną deklaracją na kontenerze: display: flow-root;.

.ramka {
  display: flow-root;
}

Kontener z display: flow-root sam obejmuje opływające dzieci, więc nie potrzebujesz ani dodatkowej klasy, ani pseudo-elementu. Clearfix spotkasz jednak w starszym kodzie, dlatego warto go rozpoznawać.

Float a układ strony

Jeśli chcesz ustawić obok siebie całe kolumny, menu albo karty, sięgnij po Flexbox, któremu poświęcony jest następny moduł, albo po Grid. Te narzędzia powstały właśnie do budowania układów i nie wymagają sztuczek z clearfixem.

Ustawiając float, odsuwasz element na skraj kontenera i pozwalasz reszcie treści go opływać, ale pamiętaj, że kontener przestaje wtedy liczyć jego wysokość - i właśnie dlatego clear, clearfix i display: flow-root są zaporą, która przywraca układowi porządek.