Właściwość CSSUkład i pozycjonowanie
clear
Każe elementowi zejść poniżej wcześniejszych elementów pływających.
- Wartość domyślna
none- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- elementy blokowe
- JavaScript
element.style.clear = "both"
Przykład
#CSS
.article footer {
clear: both;
}HTML przykładu
<div class="article" style="display: flow-root;">
<div class="box" style="float: left; width: 80px; height: 80px; margin-right: 12px;">Foto</div>
<p style="margin-top: 0">Krótki akapit obok zdjęcia.</p>
<footer style="clear: both; padding-top: 8px; color: #a3a3a3;">Stopka zaczyna się pod zdjęciem.</footer>
</div>Podgląd
Definicja i zastosowanie
#Właściwość clear mówi elementowi blokowemu, żeby nie stawał obok elementów z float, tylko przesunął się pod nie. Możesz wybrać, czy chodzi o elementy pływające po lewej, po prawej, czy po obu stronach.
Typowe zastosowanie to stopka artykułu albo kolejna sekcja, która nie powinna opływać zdjęcia z poprzedniego akapitu.
W nowoczesnych układach rzadko jest potrzebna, bo Flexbox i Grid nie korzystają z pływania. Wciąż przydaje się jednak w treściach z obrazami opływanymi tekstem.
Składnia
#Składnia
clear: none | left | right | both | inline-start | inline-end;Wartości
#Wartości w praktyce
#none
Akapit staje obok obu elementów pływających.
.demo { clear: none; }left
Akapit schodzi pod element pływający po lewej, ale może stać obok prawego.
.demo { clear: left; }right
Akapit schodzi pod element pływający po prawej.
.demo { clear: right; }both
Akapit schodzi pod wszystkie wcześniejsze elementy pływające.
.demo { clear: both; }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
#- Na rodzicu zamiast dodatkowego elementu z
clear: bothużyjdisplay: flow-root. cleardziała tylko na elementy blokowe, na<span>nie da efektu.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.