Jakich metod „clearfix” mogę użyć?


864

Mam odwieczny problem divzawijania dwu kolumnowego układu. Mój pasek boczny jest pływający, więc mój pojemnik divnie zawija zawartości i paska bocznego.

<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

Wydaje się, że istnieje wiele metod naprawiania wyraźnego błędu w Firefoksie:

  • <br clear="all"/>
  • overflow:auto
  • overflow:hidden

W mojej sytuacji jedynym, który wydaje się działać poprawnie <br clear="all"/>, jest nieco niechlujne rozwiązanie. overflow:autodaje mi paskudne paski przewijania i na overflow:hiddenpewno musi mieć skutki uboczne. Ponadto IE7 najwyraźniej nie powinien cierpieć z powodu tego problemu z powodu jego nieprawidłowego zachowania, ale w mojej sytuacji cierpi tak samo jak Firefox.

Która obecnie dostępna metoda jest najbardziej niezawodna?


1
Używam jqui.net/tips-tricks/css-clearfix, to pomaga mi ukryć kropkę :)
Val

1
Co z IE 6 i IE 7? Nigdy nie podążają właściwą drogą wyjaśniania spraw.
Praveen Kumar Purushothaman

Teraz minął rok, czy jest jakaś szansa na zrewidowanie poprawnej odpowiedzi na opisany tutaj trzywierszowy poprawka, stosowana w znanych projektach Bourbon i Inuit.css? Zobacz moją odpowiedź poniżej .
iono

Odpowiedzi:


1039

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.

25
@David Rivers: Metoda: after nie jest włamaniem, ponieważ nie wykorzystuje błędu parsowania w przeglądarce, wykorzystuje funkcję css jako rozwiązanie. Dodatkowo: after będzie obsługiwany w przyszłych przeglądarkach, w przeciwieństwie do hackowania podkreślników. Idealnie byłoby, gdyby istniała właściwość css, która może być zastosowana do elementu, który spowoduje, że będzie zawierał całą jego zawartość.
Beau Smith

7
Dzięki za awarię. Uważam, że metoda „po łatwym czyszczeniu” jest lepsza niż „przepełnienie: ukryte”, ponieważ nie przycina cieni i elementów pozycjonowanych w CSS3. Dodatkowe linie kodu są zdecydowanie tego warte.
Aneon,

7
Nie jestem zwolennikiem jasności: oba rozwiązania, ale nie zgadzam się z waszym „brudnym” oznaczeniem tego. Argument „dodawanie wolniej / ładuj wolniej” wydaje się głupi, ponieważ jest to 1 krótka linia kodu HTML, w porównaniu do kilku linii CSS (które Twoja przeglądarka musi również załadować). W przypadku argumentu „wartość semantyczna”, br z jasnym: oba są znacznie łatwiejsze do zrozumienia niż próba znalezienia głupkowatej css drużyny strzelającej. jasne: oba są krótkie i proste, a imho nie ma wpływu na „profesjonalizm”.
Vigrond

16
Wbrew powszechnemu przekonaniu overflow: hiddenlub overflow: autonie usuwa pływaków (kategoryzowanie go jako „clearfix” jest mylące); zamiast tego powoduje, że element tworzy nowy kontekst formatowania, w którym mogą być zawarte zmiennoprzecinkowe. Powoduje to rozciągnięcie pojemnika do wysokości pływaków w celu ich przechowywania. Nie wymaga to żadnego prześwitu - powiedzmy jednak, że nadal możesz zdecydować się wyczyścić lub nie wyczyścić pływaków w pojemniku, w zależności od układu.
BoltClock

3
Nie powinniśmy już wspierać IE7. Proszę zaktualizować ten z trzech linii metody opisane tutaj
IONO

70

Jakie problemy próbujemy rozwiązać?

Istnieją dwie ważne kwestie dotyczące pływających elementów:

  1. Zawierające pływające potomki. Oznacza to, że element ten staje się wystarczająco wysoki, aby owinąć wszystkich pływających potomków. (Nie wiszą na zewnątrz.)

    Pływająca zawartość wisi poza pojemnikiem

  2. Izolowanie potomków od zewnętrznych pływaków. Oznacza to, że potomkowie wewnątrz elementu powinni móc korzystać z niego clear: bothi nie wchodzić w interakcje z elementami pływającymi na zewnątrz elementu.

    <code> clear: oba </code> współdziałają z pływakiem gdzie indziej w DOM

Blokuj konteksty formatowania

Jest tylko jeden sposób na zrobienie obu tych rzeczy. I to jest ustanowienie nowego kontekstu formatowania bloku . Elementy tworzące kontekst formatowania bloku są izolowanym prostokątem, w którym elementy pływające oddziałują na siebie. Kontekst formatowania bloków zawsze będzie wystarczająco wysoki, aby wizualnie zawinąć pływających potomków, a żadne elementy pływające poza kontekstem formatowania bloków nie mogą wchodzić w interakcje z elementami wewnątrz. Ta dwustronna izolacja jest dokładnie tym, czego chcesz. W IE ta sama koncepcja nazywa się hasLayout , którą można ustawić za pomocą zoom: 1.

Istnieje kilka sposobów, aby ustanowić bloku formatowania kontekstu, ale rozwiązanie polecam jest display: inline-blockz width: 100%. (Oczywiście, nie są zwykłe ostrzeżenia o użyciu width: 100%, więc użycie box-sizing: border-boxlub put padding, marginiborder na innym elemencie).

Najbardziej niezawodne rozwiązanie

Prawdopodobnie najczęstszym zastosowaniem pływaków jest układ dwukolumnowy. (Można rozszerzyć do trzech kolumn.)

Najpierw struktura znaczników.

<div class="container">
  <div class="sidebar">
    sidebar<br/>sidebar<br/>sidebar
  </div>
  <div class="main">
    <div class="main-content">
      main content
      <span style="clear: both">
        main content that uses <code>clear: both</code>
      </span>
    </div>
  </div>
</div>

A teraz CSS.

/* Should contain all floated and non-floated content, so it needs to
 * establish a new block formatting context without using overflow: hidden.
 */
.container {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

/* Fixed-width floated sidebar. */
.sidebar {
  float: left;
  width: 160px;
}

/* Needs to make space for the sidebar. */
.main {
  margin-left: 160px;
}

/* Establishes a new block formatting context to insulate descendants from
 * the floating sidebar. */
.main-content {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

Spróbuj sam

Idź do JS Bin aby pobawić się kodem i zobaczyć, jak to rozwiązanie jest budowane od podstaw.

Tradycyjne metody usuwania błędów uważane za szkodliwe

Problem z tradycyjnymi rozwiązaniami Clearfix polega na tym, że używają dwóch różnych koncepcji renderowania, aby osiągnąć ten sam cel dla IE i wszystkich innych. W IE używają hasLayout do ustanowienia nowego kontekstu formatowania bloku, ale dla wszystkich innych używają wygenerowanego pola ( ) z , który nie ustanawia nowego kontekstu formatowania bloku. Oznacza to, że rzeczy nie zachowają się tak samo we wszystkich sytuacjach. Aby uzyskać wyjaśnienie, dlaczego jest to złe, zobacz Wszystko, co wiesz o Clearfix jest błędne .:afterclear: both


Jakie są „zwykłe zastrzeżenia dotyczące używania width: 100%”? Czy sugerujesz także użycie zoom: 1w ¶1 z §2?
Baumr

Interesująca odpowiedź, ale co z overflow: hiddenjaką koncepcją renderowania się przywołuje? A czym może się różnić hasLayout?
Baumr

To prawda, ale jeśli uniknie się używania position: absolute, to jest w porządku i będzie częścią tej samej koncepcji renderowania?
Baumr

Widzę. Przez renderowanie koncepcji miałem na myśli, czy overflow: hiddenegzekwuje coś, co różni się od tego, co robi funkcja Layout?
Baumr

2
Dowiedz się więcej hasLayoutna stronie stackoverflow.com/questions/1794350/what-is-haslayout . Uważam to za równoznaczne z ustanowieniem nowego kontekstu formatowania bloków. Elementy, które to robią, są zasadniczo odpowiedzialne za układ wszystkich swoich elementów potomnych. Jednym z rezultatów jest to, że elementy, które ustanawiają nowy kontekst formatowania bloku, zawierają pływające elementy potomne, a elementy pływające na zewnątrz elementu nie wchodzą w interakcje z clear: left|right|bothelementami wewnątrz. (To jest odpowiedź powyżej.)
Chris Calo

54

Nowy standard używany przez Inuit.css i Bourbon - dwa bardzo szeroko stosowane i dobrze utrzymane frameworki CSS / Sass:

.btcf:after {
    content:"";
    display:block;
    clear:both;
}

Notatki

Należy pamiętać, że poprawki są zasadniczo włamaniem do tego, co układy Flexbox mogą teraz zapewnić w znacznie mądrzejszy sposób . Elementy zmiennoprzecinkowe CSS zostały pierwotnie zaprojektowane z myślą o przepływie treści wbudowanych - jak obrazy w długim artykule tekstowym - a nie układach siatki i tym podobnych. Jeśli Twoje docelowe przeglądarki obsługują Flexbox , warto się temu przyjrzeć.

To nie obsługuje IE7. Nie powinieneś wspierać IE7. Takie postępowanie nadal naraża użytkowników na nieusunięte exploity bezpieczeństwa i utrudnia życie wszystkim innym twórcom stron internetowych, ponieważ zmniejsza presję na użytkowników i organizacje na przechodzenie na nowoczesne przeglądarki.

Ta poprawka została ogłoszona i wyjaśniona przez Thierry Koblentza w lipcu 2012 r. Zrzuca zbędną wagę z mikro- poprawki Nicolasa Gallaghera z 2011 r . W ten sposób uwalnia pseudoelement do własnego użytku. Zostało to zaktualizowane, aby użyć display: blockzamiast display: table(ponownie, kredyt dla Thierry Koblentz).


3
Mam nadzieję, że twoja odpowiedź zyska więcej głosów w tej sprawie, ponieważ całkowicie się z tobą zgadzam. Ponownie, jest rok 2013 i naprawdę wierzę, że jest to rozwiązanie, z którego ludzie powinni korzystać.
rafaelbiten

2
Zgoda. theie7countdown.com Sprawdź własne analizy i miejmy nadzieję, że IE7 nie jest warte twojego czasu.
Justin

1
@Justin zgodził się; Twoje osobiste analizy to rozplanują. Nie sądzę jednak, aby strona odliczania była od jakiegoś czasu aktualizowana - najlepiej używać statystyk caniuse, które ustawiają IE7 na 0,39% na całym świecie.
iono

1
Mamy nadzieję, że hacki takie jak clearfix wkrótce staną się niepotrzebne dzięki użyciu Flexboksa, a nie elementów pływających, do układu.
iono

Możesz sprzeciwić się wspieraniu IE7, ile chcesz, ale jeśli od strony biznesowej istnieje wymóg wspierania tych użytkowników (z różnych powodów - zazwyczaj pieniędzy), zrobisz to bez względu na to, jak się czujesz w tej sprawie
Kris Selbekk

27

Zalecam użycie następujących, pobranych z http://html5boilerplate.com/

/* >> The Magnificent CLEARFIX << */
.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac \*/
.clearfix {  
  display: block;  
}

8
Kto teraz pamięta IE-mac? Po co komplikować sprawy z powodu problemów, które nie są już istotne?
Ilya Streltsyn

23

Właściwość przelewu może być używana do usuwania pływaków bez dodatkowego narzutu:

.container { overflow: hidden; }

Działa to we wszystkich przeglądarkach oprócz IE6, gdzie wszystko, co musisz zrobić, to włączyć hasLayout (zoom jest moją preferowaną metodą):

.container { zoom: 1; }

http://www.quirksmode.org/css/clearing.html


3
przepełnienie: ukryty nie działa w przeglądarce PS3. Nie żeby większość ludzi tego potrzebowała, ale jest to najważniejsza rzecz wysadzająca moją stronę w PS3, na którą próbujemy celować z powodów biznesowych. Ugh.
gtd,

1
Jest to problem, jeśli faktycznie chcesz, aby pewne treści wisiały poza kontenerem.
Simon East

przepełnienie: ukryte ma zły efekt uboczny przycinania zawartości
Chris Calo

9
overflow:hiddenma wpływ zawartości obcinania; ma efekt uboczny
opróżnienia

przepełnienie: auto wyzwoli również kontekst formatowania bloku i nie spowoduje obcięcia zawartości.
Harry Robbins,

17

Znalazłem błąd w oficjalnej metodzie CLEARFIX: DOT nie ma rozmiaru czcionki. A jeśli ustawiszheight = 0 i pierwszy element w drzewie DOM ma klasę „clearfix”, zawsze będziesz mieć margines na dole strony o wielkości 12 pikseli :)

Musisz to naprawić w następujący sposób:

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

Jest teraz częścią układu YAML ... Spójrz na to - to bardzo interesujące! http://www.yaml.de/en/home.html


15

To dość schludne rozwiązanie:

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

Wiadomo, że działa w Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

Włączenie selektora: before nie jest konieczne do wyczyszczenia pływaków, ale zapobiega zawaleniu górnych marginesów w nowoczesnych przeglądarkach. Zapewnia to spójność wizualną z IE 6/7 po zastosowaniu zoomu: 1.

Od http://nicolasgallagher.com/micro-clearfix-hack/


1
Tak, od połowy 2011 roku jest to moje ulubione rozwiązanie. W razie potrzeby pozwala na pozycjonowanie obiektów poza pudełkiem zawierającym (unikanie overflow: hidden).
Simon East

10

Clearfix z bootstrap:

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

Z jakiej wersji bootstrap to jest?
Eric

8

Po prostu używam:

.clear:after{
  clear: both;
  content: "";
  display: block;
}

Działa najlepiej i jest zgodny z IE8 + :)


Nie działa w IE7, ponieważ nie obsługuje pseudoelementów CSS.
superluminarny

4
... Dlatego powiedział „zgodny z IE8 +”. Większość stron internetowych nie musi już obsługiwać IE7, jego użycie jest mniejsze niż 1% na całym świecie. theie7countdown.com
Justin

8

Biorąc pod uwagę ogromną liczbę odpowiedzi, których nie zamierzałem publikować. Jednak ta metoda może komuś pomóc, ponieważ pomogła mi.

Zawsze, gdy to możliwe, trzymaj się z dala od pływaków

Warto wspomnieć, unikam pływaków jak Ebola. Jest wiele powodów i nie jestem sam; Przeczytaj odpowiedź Rikudo o tym, co jest poprawką, a zobaczysz, co mam na myśli. Jego własnymi słowami:...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...

Istnieją inne dobre (a czasem lepsze) opcje inne niż zmiennoprzecinkowe. Wraz z postępem i ulepszaniem technologii, flexbox (i inne metody) będą szeroko stosowane, a zmiennoprzecinkowe stanie się po prostu złą pamięcią. Może CSS4?


Niewłaściwe zachowanie pływaka i nieudane czyszczenie

Po pierwsze, czasami możesz myśleć, że jesteś bezpieczny przed pływakami, dopóki twój ratownik nie zostanie przekłuty, a przepływ HTML zacznie spadać:

W codepen http://codepen.io/omarjuvera/pen/jEXBya poniżej praktyka czyszczenia pływaka za pomocą <div classs="clear"></div>(lub innego elementu) jest powszechna, ale marszczy brwi i jest antysemantyczna.

<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

div {
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

div.floated {
    float: left;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

Jednak tylko wtedy, gdy pomyślałeś, że twój pływak jest godny żagla ... bum! Gdy rozmiar ekranu staje się coraz mniejszy, widać dziwne zachowania, takie jak na poniższej grafice (Same http://codepen.io/omarjuvera/pen/jEXBya ):

próbka błędu pływaka 1

Dlaczego powinno Cię to obchodzić? Nie jestem pewien dokładnej liczby, ale około 80% (lub więcej) używanych urządzeń to urządzenia mobilne z małymi ekranami. Komputery stacjonarne / laptopy nie są już królem.


To się nie kończy

To nie jedyny problem z pływakami. Jest ich wiele, ale w tym przykładzie niektórzy mogą powiedzieć all you have to do is to place your floats in a container. Ale jak widać na codepen i grafice, tak nie jest. Najwyraźniej pogorszyło to sytuację:

HTML

<div id="container" class="">
  <div class="floated">1st</div>
  <div class="floated">2nd</div>
  <div class="floated">3nd</div>
</div> <!-- /#conteiner -->
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

#container {
  min-height: 100px; /* To prevent it from collapsing */
  border: 1px solid #0f0;
}
.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

Co do wyniku?

To jest to samo! float bug sample 2

Co najmniej wiesz, że zaczniesz imprezę CSS, zapraszając na nią wszelkiego rodzaju selektory i właściwości; robiąc większy bałagan w CSS niż od tego, co zacząłeś. Po prostu napraw swój pływak.


CSS Clearfix na ratunek

Ten prosty i bardzo elastyczny kawałek CSS jest pięknem i „wybawcą”:

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

Otóż ​​to! To naprawdę działa bez łamania semantyki i czy wspominałem, że działa? :

Z tej samej próbki ... HTML

<div class="clearfix">
    <div class="floated">1st</div>
    <div class="floated">2nd</div>
    <div class="floated">3nd</div>
</div>
<section>Below</section>

CSS

div.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}
section {
        border: 4px solid #00f;
}


.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

Teraz już nie potrzebujemy <div classs="clear"></div> <!-- Acts as a wall -->i utrzymujemy radość semantycznej policji. To nie jedyna korzyść. Ta poprawka reaguje na każdy rozmiar ekranu bez użycia@media w najprostszej formie. Innymi słowy, utrzyma kontrolę nad pływakiem i zapobiegnie powodziom. Wreszcie, obsługuje stare przeglądarki w jednym małym kotletu karate =)

Oto znowu poprawka

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

2
Powodem, dla którego element o clearnazwie klasy nie działa, jest to, że atrybut classjest niepoprawny. To, co napisałeś, jest classsz dodatkowym s.
kasztan

Twój przykład nie pokazuje tego, co twierdzisz, nawet po poprawieniu błędów.
Przywróć Monikę - notmaynard

7

Zawsze przesuwam główne sekcje mojej siatki i odnoszę się clear: both;do stopki. To nie wymaga dodatkowej dywizji lub klasy.


Neil, myślę, że problem pojawia się, gdy potrzebujesz obramowania wokół obu kolumn (lub koloru tła / obrazu), potrzebujesz sekcji otoki, która wymaga włamania zawierającego.
Simon East

5

szczerze; wszystkie rozwiązania wydają się być włamaniem do naprawy błędu renderowania ... czy się mylę?

uważam, że <br clear="all" />jest najłatwiejszy, najprostszy. widzenie class="clearfix"wszędzie nie może wywołać wrażliwości kogoś, kto sprzeciwia się obcym elementom markeup, prawda? po prostu malujesz problem na innym płótnie.

Używam również display: hiddenrozwiązania, które jest świetne i nie wymaga żadnych dodatkowych deklaracji klasy ani znaczników HTML ... ale czasami potrzebujesz elementów, aby przepełnić kontener, na przykład. ładne wstążki i skrzydła


5
overflow: hiddenMyślę, że masz na myśli
ajbeaven

Niektórzy zalecają użycie klasy o nazwie grupa, która czyni semantyczne bardziej. Szczerze mówiąc, nie jestem pewien, dlaczego tak się nie stało
Damon

całkowicie wycofuję tę pozycję. po prostu używam teraz clearfix. ale w bardzo popularnych kontenerach „upiekę” go do css, aby ograniczyć zanieczyszczenie atrybutami klasy. nazywanie go „grupą” wydaje się przyjemne. mniej znaków również do pisania
duggi


4

Wypróbowałem wszystkie te rozwiązania, duży margines zostanie dodany do <html>elementu automatycznie, gdy użyję poniższego kodu:

.clearfix:after {   
    visibility: hidden;   
    display: block;   
    content: ".";   
    clear: both;   
    height: 0;
}

Wreszcie rozwiązałem problem marży, dodając font-size: 0;do powyższego CSS.


2
To dlatego, że dodajesz linię ., po prostu użyjcontent: ""
Forty

4

W przypadku SASS poprawka to:

@mixin clearfix {
    &:before, &:after {
        content: '';
        display: table;
    }
    &:after {
        clear: both;
    }
    *zoom: 1;
}

i jest używany jak:

.container {
    @include clearfix;
}

jeśli chcesz nowego clearfix:

@mixin newclearfix {
    &:after {
        content:"";
        display:table;
        clear:both;
    }
}

4

Za pomocą LESS ( http://lesscss.org/ ) można stworzyć przydatnego pomocnika usuwania błędów:

.clearfix() {
  zoom: 1;
  &:before { 
    content: ''; 
    display: block; 
  }
  &:after { 
    content: ''; 
    display: table; 
    clear: both; 
  }
}

A następnie użyj go z problematycznymi pojemnikami, na przykład:

<!-- HTML -->
<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>
/* LESS */
div#container {
  .clearfix();
}

4

Użycie overflow:hidden/ autoi wysokość dla ie6 wystarczy, jeśli pływający pojemnik ma element nadrzędny.

Każdy z #testów może działać, ponieważ podany poniżej kod HTML usuwa pływaki.

#test {
  overflow:hidden; // or auto;
  _height:1%; forces hasLayout in IE6
}

<div id="test">
  <div style="floatLeft"></div>
  <div style="random"></div>
</div>

W przypadkach, gdy odmawia pracy z ie6, po prostu ustaw element nadrzędny, aby wyczyścić element zmiennoprzecinkowy.

#test {
  float: left; // using float to clear float
  width: 99%;
}

Nigdy tak naprawdę nie potrzebowałem żadnego innego rodzaju czyszczenia. Może w ten sposób piszę mój HTML.


1
Chciałbym przestudiować twój sposób pisania HTML bez usuwania elementów. Czy mógłbyś zamieścić jakieś linki?
Starx

4

Nowa wartość wyświetlania wydaje się zadaniu w jednym wierszu.

display: flow-root;

Ze specyfikacji W3: „Element generuje pudełko kontenera bloków i określa jego zawartość za pomocą układu przepływu. Zawsze ustanawia nowy kontekst formatowania bloku dla swojej zawartości”.

Informacje: https://www.w3.org/TR/css-display-3/#valdef-display-flow-root https://www.chromestatus.com/feature/5769454877147136

※ Jak pokazano w powyższym linku, wsparcie jest obecnie ograniczone, więc może być przydatne wsparcie zastępcze, takie jak poniżej: https://github.com/fliptheweb/postcss-flow-root


3

Też bym się unosił #content, w ten sposób obie kolumny zawierają zmiennoprzecinkowe . Również dlatego, że pozwoli ci wyczyścić elementy w środku#content bez usuwania paska bocznego.

Tak samo jest z opakowaniem, trzeba by uczynić go kontekstem formatowania bloku, aby zawinąć dwie kolumny.

W tym artykule wymieniono kilka wyzwalaczy, których można użyć: konteksty formatowania bloków .


3

Clearfix to sposób na automatyczne czyszczenie elementu po sobie, dzięki czemu nie trzeba dodawać dodatkowych znaczników.

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.cleaner {
  clear: both;
}

Zwykle musisz zrobić coś w następujący sposób:

<div style="float: left;">Sidebar</div>
<div class="cleaner"></div> <!-- Clear the float -->

Dzięki clearfix wystarczy

<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->

2

Dlaczego po prostu próbujesz użyć hacka css, aby zrobić to, co robi 1 linia HTML. A dlaczego nie użyć semantycznego html tu put break, aby powrócić do wiersza?

Dla mnie naprawdę lepiej jest użyć:

<br style="clear:both" />

A jeśli nie chcesz żadnego stylu w swoim html, musisz po prostu użyć klasy na przerwę i umieścić .clear { clear:both; }w CSS.

Zaleta tego:

  • Semantyczne użycie html do powrotu do linii
  • Jeśli nie zostanie załadowany CSS, będzie działał
  • Nie potrzebujesz dodatkowego kodu CSS i Hack
  • nie trzeba symulować br z CSS, już istnieje w HTML

2

Zakładając, że używasz tej struktury HTML:

<div id="container">
  <div id="content">
  </div>
  <div id="sidebar">
  </div>
</div>

Oto CSS, którego chciałbym użyć:

div#container {
    overflow: hidden;    /* makes element contain floated child elements */
}

div#content, div#sidebar {
    float: left;
    display: inline;    /* preemptively fixes IE6 dobule-margin bug */
}

Używam tego zestawu cały czas i działa dobrze dla mnie, nawet w IE6.


2

W przeciwieństwie do innych wyraźnych poprawek, tutaj jest otwarty bez pojemników

Inne poprawki albo wymagają, aby element pływający znajdował się w dobrze oznakowanym pojemniku, albo wymagają dodatkowego, semantycznie pustego <div>. I odwrotnie, wyraźne oddzielenie treści i znaczników wymaga ścisłego rozwiązania tego problemu przez CSS .

Sam fakt, że należy zaznaczyć koniec pływaka, nie pozwala na bezobsługowe składanie CSS .

Jeśli twoim celem jest ten ostatni, zmiennoprzecinkowy powinien pozostać otwarty na wszystko (akapity, uporządkowane i nieuporządkowane listy itp.), Aby go owijać, dopóki nie pojawi się „clearfix”. Na przykład poprawka może być ustawiona przez nowy nagłówek.

Dlatego używam następującej poprawki z nowymi nagłówkami:

h1 {
    clear: both;
    display: inline-block;
    width: 100%;
}

To rozwiązanie jest szeroko stosowane na mojej stronie internetowej w celu rozwiązania problemu: tekst obok miniatury pływającej jest krótki, a górny margines następnego obiektu czyszczącego nie jest przestrzegany.

Zapobiega także ręcznej interwencji podczas automatycznego generowania plików PDF z witryny. Oto przykładowa strona .


2

Zawsze używam mikro-clearfix :

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 */
.cf {
    *zoom: 1;
}

W Cascade Framework nawet domyślnie stosuję go do elementów na poziomie bloku. IMO, stosując go domyślnie do elementów na poziomie bloku, zapewnia elementom na poziomie bloku bardziej intuicyjne zachowanie niż ich tradycyjne zachowanie. Ułatwiło mi to także dodanie obsługi starszych przeglądarek do Cascade Framework (która obsługuje IE6-8, a także nowoczesne przeglądarki).


0

Możesz również umieścić to w swoim CSS:

.cb:after{
  visibility: hidden;
  display: block;
  content: ".";
  clear: both;
  height: 0;
}

*:first-child+html .cb{zoom: 1} /* for IE7 */

I dodaj klasę „cb” do div rodzica:

<div id="container" class="cb">

Nie musisz dodawać nic więcej do oryginalnego kodu ...


0

#content{float:left;}
#sidebar{float:left;}
.clear{clear:both; display:block; height:0px; width:0px; overflow:hidden;}
<div id="container">
  <div id="content">text 1 </div>
  <div id="sidebar">text 2</div>
  <div class="clear"></div>
</div>


-2

Czy próbowałeś tego:

<div style="clear:both;"/>

Nie miałem żadnych problemów z tą metodą.


2
Myślę, że chodzi o to, że staramy się unikać zarówno dodatkowych stylów znaczników, jak i wbudowanych za pomocą tego rozwiązania. To zależy od tego, który kompromis jest najszczęśliwszy, jak sądzę
Sam Murray-Sutton,

1
Problem z tą metodą polega na tym, że w przeglądarkach IE div ma wysokość, więc odstępy będą wyłączone. Właśnie dlatego metody css ustawiają wysokość i rozmiar czcionki.
zznq

musisz powiedzieć <div style = "wyczyść: oba"> </div> z odpowiednim tagiem zamykającym, aby odpowiednio był zgodny z XHTML. Miałem problemy z jQuery, gdy tego nie robiłem
Simon_Weaver

1
Jak na ironię, „podobno samozamykający” <div/> jest zgodny z X (HT) ML, ale nie jest kompatybilny z HTML , więc w przypadku dokumentów obsługiwanych, ponieważ text/htmlwszystkie przeglądarki będą traktować go jako niezamknięty tag. Niestety nie ma takich tagów jak samozamykające się text/htmldokumenty, niezależnie od typu dokumentu .
Ilya Streltsyn

-2

Moją ulubioną metodą jest utworzenie klasy clearfix w moim dokumencie css / scss, jak poniżej

.clearfix{
    clear:both
}

A następnie wywołaj go w moim dokumencie HTML, jak pokazano poniżej

<html>
  <div class="div-number-one">
    Some Content before the clearfix
  </div>

  <!-- Let's say we need to clearfix Here between these two divs --->
  <div class="clearfix"></div>

  <div class="div-number-two">
    Some more content after the clearfix
  </div>
</html>

-2

To takie proste, poprawka usuwa problem, gdy używamy właściwości float wewnątrz elementu div. Jeśli używamy dwóch elementów div, jeden jako float: left; a drugi jako float: prawo; możemy użyć clearfix dla elementu nadrzędnego dla dwóch elementów div. Jeśli odmówimy skorzystania z clearfix, niepotrzebne spacje wypełnij treścią poniżej, a struktura witryny ulegnie zniszczeniu.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.