W zależności od produkowanego projektu każde z poniższych rozwiązań CSS clearfix ma swoje zalety.
Clearfix ma przydatne aplikacje, ale został również wykorzystany jako hack. Zanim użyjesz poprawki, być może te nowoczesne rozwiązania css mogą być przydatne:
Nowoczesne rozwiązania Clearfix
Pojemnik z overflow: auto;
Najprostszym sposobem na wyczyszczenie elementów pływających jest użycie stylu overflow: autona elemencie zawierającym. To rozwiązanie działa we wszystkich nowoczesnych przeglądarkach.
<div style="overflow: auto;">
<img
style="float: right;"
src="path/to/floated-element.png"
width="500"
height="500"
>
<p>Your content here…</p>
</div>
Jeden minus, użycie pewnych kombinacji marginesu i dopełnienia na elemencie zewnętrznym może spowodować pojawienie się pasków przewijania, ale można to rozwiązać, umieszczając margines i dopełnienie na innym elemencie zawierającym element nadrzędny.
Użycie opcji „przepełnienie: ukryte” jest również rozwiązaniem typu clearfix, ale nie będzie miało pasków przewijania, jednak użycie hiddenspowoduje wycięcie dowolnej zawartości umieszczonej poza elementem zawierającym.
Uwaga: Element pływający jest imgznacznikiem w tym przykładzie, ale może być dowolnym elementem HTML.
Clearfix Reloaded
Thierry Koblentz na CSSMojo napisał: Ponownie załadowano najnowszą wersję Clearfix . Zauważył, że rezygnując z obsługi oldIE, rozwiązanie można uprościć do jednej instrukcji css. Dodatkowo użycie display: block(zamiast display: table) pozwala na prawidłowe zwijanie marginesów, gdy elementy z clearfix są rodzeństwem.
.container::after {
content: "";
display: block;
clear: both;
}
To najnowocześniejsza wersja poprawki.
⋮
⋮
Starsze rozwiązania Clearfix
Poniższe rozwiązania nie są konieczne w przypadku nowoczesnych przeglądarek, ale mogą być przydatne do kierowania na starsze przeglądarki.
Pamiętaj, że te rozwiązania opierają się na błędach przeglądarki i dlatego powinny być używane tylko wtedy, gdy żadne z powyższych rozwiązań nie działa dla Ciebie.
Są one wymienione z grubsza w porządku chronologicznym.
„Beat That ClearFix”, poprawka do nowoczesnych przeglądarek
Thierry koblentz”z CSS Mojo wskazał, że podczas kierowania nowoczesnych przeglądarek, możemy teraz upuść zoomi ::beforenieruchomości / wartości i po prostu użyć:
.container::after {
content: "";
display: table;
clear: both;
}
To rozwiązanie celowo nie obsługuje IE 6/7…!
Thierry oferuje również: „ Słowo przestrogi : jeśli zaczynasz nowy projekt od zera, idź do niego, ale nie zamieniaj tej techniki na tę, którą masz teraz, ponieważ nawet jeśli nie obsługujesz oldIE, istniejące zasady uniemożliwiają malejące marginesy ”.
Micro Clearfix
Najnowsze i globalnie przyjęte rozwiązanie Clearfix, Micro Clearfix firmy Nicolas Gallagher .
Znana obsługa: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+
.container::before, .container::after {
content: "";
display: table;
}
.container::after {
clear: both;
}
.container {
zoom: 1;
}
Właściwość przepełnienia
Ta podstawowa metoda jest preferowana w zwykłym przypadku, gdy pozycjonowana zawartość nie będzie wyświetlana poza granicami kontenera.
http://www.quirksmode.org/css/clearing.html
- wyjaśnia, jak rozwiązać typowe problemy związane z tą techniką, a mianowicie ustawienie width: 100%kontenera.
.container {
overflow: hidden;
display: inline-block;
display: block;
}
Zamiast używać displaywłaściwości do ustawiania „hasLayout” dla IE, można użyć innych właściwości do wyzwalania „hasLayout” dla elementu .
.container {
overflow: hidden;
zoom: 1;
display: block;
}
Innym sposobem na wyczyszczenie pływaków za pomocą overflowwłaściwości jest użycie hakowania podkreślenia . IE zastosuje wartości poprzedzone znakiem podkreślenia, inne przeglądarki nie. zoomWłasność wyzwala hasLayout w IE:
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
Podczas gdy to działa ... nie jest idealne używanie hacków.
SROKA: Łatwa metoda czyszczenia
Ta starsza metoda „łatwego czyszczenia” ma tę zaletę, że pozwala pozycjonowanym elementom wisieć poza granicami kontenera, kosztem bardziej skomplikowanego CSS.
To rozwiązanie jest dość stare, ale możesz dowiedzieć się wszystkiego o łatwym rozliczaniu pozycji jest wszystkim: http://www.positioniseverything.net/easyclearing.html
Element używający właściwości „wyczyść”
Szybkie i brudne rozwiązanie (z pewnymi wadami) do szybkiego łączenia czegoś:
<br style="clear: both" /> <!-- So dirty! -->
Wady
- Nie reaguje i dlatego może nie przynieść pożądanego efektu, jeśli style układu zmienią się na podstawie zapytań o media. Rozwiązanie w czystym CSS jest bardziej idealne.
- Dodaje znaczniki HTML bez konieczności dodawania wartości semantycznej.
- Wymaga wbudowanej definicji i rozwiązania dla każdej instancji, a nie odwołania do klasy do pojedynczego rozwiązania „clearfix” w css i odwołania do klasy w html.
- Utrudnia to pracę z kodem dla innych, ponieważ mogą być zmuszeni napisać więcej hacków, aby obejść ten kod.
- W przyszłości, gdy będziesz potrzebować / chcesz użyć innego rozwiązania Clearfix, nie będziesz musiał wracać i usuwać wszystkich
<br style="clear: both" />znaczników zaśmieconych wokół znaczników.
