Czy clearfix jest przestarzały?

Jak wspomniano w innej odpowiedzi minusem hidden jest to, że o dziwo ermm ukryje rzeczy takie jak rozwijane menu. Istnieje jednak inny sposób, aby zawrzeć jedną linią, poprzez unoszenie kontenera nadrzędnego. Zazwyczaj działa to tam, gdzie overflow: hidden ma minusy, a także floating pomaga w wielu starszych problemach z IE, szczególnie w listach. Jeśli możesz użyć szerokości, to użyłbym "float in a float", lub display: inline-block.

Nie mówię, że "clearfix" nie ma sensu - ale dla mnie to zbyt szeroko zakorzenione w tematach CMS (takich jak WordPress i Drupal), które myślę, że w wielu przypadkach jest zbyt często używane i na div, które nie muszą być wyczyszczone lub zawarte.

Właściwie nie mogę myśleć o sytuacji, w której nie mogę użyć ani overflow, ani float, nad clearfix, ale mój mózg jest w trybie wakacyjnym - ale jak to, clearfix, jest rozwiązaniem do kopiowania / wklejania, które czasami jest najprostszą rzeczą do polecania, jednak musi to być ten, który ustawia hasLayout dla IE, który oczywiście overflow i float również teraz.

Dodano to właśnie pojawiło się ponownie: i mózg nie w trybie wakacyjnym..

Naprawdę zaczynam myśleć tak, clearfix nie jest konieczny (przynajmniej nie znalazłem jeszcze przykładu, gdzie jest) nawet powyższy przykład @thirtydot można obejść z display: inline-block i nadal mieć obsługę IE6, kontener o stałej szerokości ma wymagania IE7 i poniżej hasLayout i czyniąc go blokiem inline dla wszystkich innych przeglądarki mogą być wyśrodkowane, a elementy" offsetowe " będą działać poprawnie, podczas gdy kontener rozciągnie się pionowo]}

Przykład

Widziałem również odniesienie do nowego ulepszonego clearfix dla tych zwijających się marginesów za pomocą :before, a także :after w clearfix hack, ale o ile czegoś nie brakuje demo jest wadliwe - w elementach pre jest nierówna Biała spacja, a pola "clearfix" nie zawierają żadnych pływaków, tak szybko, jak to możliwe. tak jak elementy w nich floatowane, każda metoda wykonuje to samo.

Zwróć uwagę, że marginesy na elementach pre i tak nie reagują tak samo jak inne (więc spróbuj użyć wypełnienia zamiast marginesu, aby zobaczyć ten sam obraz podczas testowania).. i jest jeszcze inny IE "foible", gdzie IE nie zawiera poprawnie marginesów, jeśli nie są one jawnie określone, a w demo są wyraźne marginesy na h2, ale nie p, więc wszystkie rzeczy są równe elementowi clearfixed jak demo ' D przez TJK w tym strona sztucznie wymusza ograniczanie marginesów na normalnym elemencie blokowym, tak samo jak robiłoby to 1px Top/bottom padding, ponieważ przeglądarki i tak robią to inaczej!

Jeśli to zrobisz, to float elementy wewnątrz tych kontenerów ( punkt czyszczenia w każdym razie) - marginesy zawierają wtedy tak, jak prawdopodobnie chcesz je, jak gdyby wewnątrz nowego kontekstu formatowania bloków - bez żadnej dodatkowej {5]} część hack, wszystkie odmiany clearfix działają jednakowo cóż!

Zobacz demo reloaded

Więc moim zdaniem nie ma już potrzeby tego sposobu "clearfix", po prostu znajdź najlepszy sposób, aby utworzyć nowy kontekst formatowania bloków, używając haslayout dla starszych IE.. właściwości dla obu są takie same!

Jak zaznacza TJK w swoim artykule : http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

Lepsze alternatywy

Jeśli można zastosować szerokość do element zawierający pływaki, wtedy twój najlepszym rozwiązaniem jest użycie:

display: inline-block; width: <any explicit value>;

Myślę, że to sprawiedliwe i nawet ze 100% elementami, które mogą wymagać wyściółki, możesz to zrobić w połączeniu z box-sizing

.clearfix {
  display: inline-block;
  width: 100%;
  *width: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

overflow:hidden jest bardzo " potężny "(używam go od kilku lat i zgadzam się z tym, co powiedział David), ale jednocześnie naraża na problem. Jeśli np. wewnątrz kontenera masz jakieś elementy abs, które musisz przeciągnąć i upuścić na zewnątrz, u nie będzie w stanie zobaczyć ich Na Zewnątrz kontenera. W tym konkretnym przypadku musisz użyć tej sztuczki 'clearfix';)

Tak, jest" przestarzały " przez CSS Display L3 :

Stworzył flow oraz flow-root typy wyświetlaczy wewnętrznych aby lepiej wyrazić układ przepływu typy wyświetlania i stworzyć jawny przełącznik do tworzenia elementu a BFC root. (Powinno to wyeliminowanie potrzeby hacków typu ::after { clear: both; } i overflow: hidden które są przeznaczone do osiągnięcia tego celu.)

Więc teraz właściwą drogą jest

display: flow-root;

Niestety to ostatnie dodatek, więc przeglądarki jeszcze go nie zaimplementowały.

Od wielu lat polecam metodę overflow: hidden. Jest szeroko wspierany.

Niedawno odkryłem ku mojemu miłemu zaskoczeniu, że overflow:hidden działa doskonale w dzisiejszych czasach. Używałem metody clearfix aż do około 6 miesięcy temu i jest dość nadęty w porównaniu.

Uwaga: Upewnij się, że masz poprawny zestaw DOCTYPE, jeśli dopiero testujesz. Złapał mnie kilka razy i zawsze zapominam!

Na przykład w IE9 poniższe po prostu nie zadziała bez <!DOCTYPE html> na górze.

<!DOCTYPE html>
<html>

<style>

#bottom_panel {
    overflow: hidden;
    background: orange;
    border:1px solid red;
}

#bottom_panel .col1 {
    background: red;
    float: left;
    width: 100px
}

#bottom_panel .col2 {
    background: yellow;
    float: left;
    width: 70px
}

#bottom_panel .col3 {
    background: green;
    float: left;
    width: 150px
}

.clear {
    clear: both;
}

</style>

<div id="bottom_panel">

    <div class="col1">this is col 1</div>
    <div class="col2">this is col 2. It's taller than the other columns because it's got more text in ot</div>
    <div class="col3">this is col 3</div>

</div>

<div>
This should not be floating around! Should be underneath the columns!
</div>

</html>

Nie powiedziałbym, że clearfixing jest przestarzały. Powiedziałbym jednak, że większość obecnie używanych wersji clearfix jest nieaktualna.

Według ekspertów , jest to wersja, z której powinieneś dzisiaj korzystać:

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