float
Przesuwa element do lewej lub prawej krawędzi, a tekst opływa go z drugiej strony.
- Wartość domyślna
none- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy, bez efektu dla elementów absolutnych oraz elementów flex i grid
- JavaScript
element.style.cssFloat = "left"
Przykład
#.article img {
float: right;
width: 40%;
margin: 0 0 12px 16px;
border-radius: 12px;
}<div class="article" style="display: flow-root;">
<img src="/collections/covers/darmowa-nauka-programowania.webp" alt="" width="240" height="160">
<p style="margin-top: 0">Biblioteki to świetne miejsce do nauki: cisza, dostęp do książek i darmowe Wi-Fi. Wiele osób zaczyna tam pierwsze kursy programowania.</p>
<p>Zdjęcie po prawej opływa tekst dzięki właściwości float.</p>
</div>Definicja i zastosowanie
#Właściwość float wyjmuje element z normalnego przepływu i dosuwa go do lewej albo prawej krawędzi rodzica. Tekst i elementy liniowe opływają go wtedy z boku, jak w gazecie.
Dawniej na float budowano całe układy kolumnowe. Dziś do tego służą Flexbox i Grid, a float wrócił do swojej pierwotnej roli: zdjęcie albo cytat w tekście artykułu, który opływa treść.
Rodzic zawierający wyłącznie elementy pływające „zapada się” do zerowej wysokości. Rozwiązuje to display: flow-root na rodzicu albo właściwość clear na elemencie po nim.
Składnia
#float: none | left | right | inline-start | inline-end;Wartości
#- Element nie pływa i stoi w zwykłym przepływie nad tekstem.
- Element przylega do lewej krawędzi, tekst płynie po prawej.
- Element przylega do prawej krawędzi, tekst płynie po lewej.
- Krawędź początku linii: lewa w językach pisanych od lewej, prawa w pisanych od prawej.
Wartości w praktyce
#none
.demo { float: none; }left
.demo { float: left; }right
.demo { float: right; margin: 4px 0 4px 12px; }inline-start
.demo { float: inline-start; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Do układów kolumnowych używaj Flexboxa lub Grida. Float zostaw do obrazów w tekście.
- Rodzicowi pływających elementów dodaj
display: flow-root, żeby nie zapadał się do zera.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.