Co to jest clearfix?

Jeśli nauczysz się wizualizacji, ten obrazek może pomóc ci zrozumieć, co clearfix robi.

Pozostałe odpowiedzi są poprawne. Ale chcę dodać, że jest to relikt czasu, kiedy ludzie po raz pierwszy uczyli się CSS i nadużywali float, aby zrobić cały ich układ. float jest przeznaczony do wykonywania takich rzeczy, jak obrazy float obok długich przebiegów tekstu, ale wiele osób używało go jako podstawowego mechanizmu układu. Ponieważ tak naprawdę nie było do tego przeznaczone, potrzebujesz hacków takich jak "clearfix", aby to działało.

These days display: inline-block is a solid alternative (except for IE6 and IE7), though more modern przeglądarki są dostarczane z jeszcze bardziej przydatnymi mechanizmami układu pod nazwami takimi jak flexbox, układ siatki itp.

clearfix pozwala na zawijanie pojemnika na pływające dzieci. Bez clearfix lub równoważnej stylizacji, pojemnik nie owija się wokół pływających dzieci i zapada się, tak jakby jego pływające dzieci były ustawione absolutnie.

Istnieje kilka wersji clearfix, z Nicolas Gallagher oraz Thierry Koblentz jako główni autorzy.

Jeśli chcesz mieć wsparcie dla starszych przeglądarek, najlepiej użyć tego clearfix:

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

W SCSS, należy użyć następującej techniki:

%clearfix {
  &:before, &:after {
    content:" ";
    display:table;
  }

  &:after {
    clear:both;
  }

  & {
    *zoom:1;
  }
}

#clearfixedelement {
    @extend %clearfix;
}

Jeśli nie zależy ci na obsłudze starszych przeglądarek, istnieje krótsza wersja:

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

Przedstawiamy aktualizację sytuacji w drugim kwartale 2017 roku.

Nowa właściwość wyświetlania CSS3 jest dostępna w Firefoksie 53, Chrome 58 i operze 45.

.clearfix {
   display: flow-root;
}

Sprawdź dostępność dowolnej przeglądarki tutaj: http://caniuse.com/#feat=flow-root

Element (z właściwością display ustawioną na Flow-root) generuje kontener blokowy i rozkłada jego zawartość za pomocą układu przepływu. Zawsze ustanawia nowy kontekst formatowania bloków dla jego zawartość.

Co oznacza, że jeśli użyjesz rodzica div zawierającego jedno lub kilka pływających Dzieci, Ta właściwość zapewni, że rodzic zamknie wszystkie swoje dzieci. Bez potrzeby clearfix hack. Na wszystkich dzieciach, ani nawet na ostatnim elemencie dummy (jeśli używałeś wariantu clearfix z :before na ostatnich dzieciach).

.container {
  display: flow-root;
  background-color: Gainsboro;
}

.item {
  border: 1px solid Black;
  float: left;
}

.item1 {  
  height: 120px;
  width: 120px;
}

.item2 {  
  height: 80px;
  width: 140px;
  float: right;
}

.item3 {  
  height: 160px;
  width: 110px;
}

<div class="container">
  This container box encloses all of its floating children.
  <div class="item item1">Floating box 1</div>
  <div class="item item2">Floating box 2</div> 
  <div class="item item3">Floating box 3</div>  
</div>

Mówiąc najprościej, clearfix to hack .

Jest to jedna z tych brzydkich rzeczy, z którymi wszyscy musimy po prostu żyć, ponieważ jest to naprawdę jedyny rozsądny sposób zapewnienia, że pływające elementy dziecka nie przepełnią ich rodziców. Istnieją inne schematy układu tam, ale pływające jest zbyt powszechne w web design / development dziś ignorować wartość clearfix hack.

.container:before,
.container:after {
  content:"";
  display:table;
}
.container:after {
  clear:both;
}
.container {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

Bibliografia

Technika powszechnie stosowana w układach CSS opartych na float polega na przypisaniu kilku właściwości CSS do elementu, o którym wiesz, że będzie zawierał elementy pływające. Technika, która jest powszechnie zaimplementowana przy użyciu definicji klasy o nazwie clearfix, (zazwyczaj) implementuje następujące zachowania CSS:

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

Celem tych połączonych zachowań jest stworzenie kontenera :after aktywnego elementu zawierającego pojedynczy '."oznaczone jako ukryte, które wyczyści wszystkie istniejące pływaki i skutecznie zresetuj stronę dla następnego fragmentu treści.

Inną (i być może najprostszą) opcją do tworzenia clearfix jest użycie overflow:hidden; na elemencie zawierającym. Na przykład

.parent {
  background: red;
  overflow: hidden;
}
.segment-a {
  float: left;
}
.segment-b {
  float: right;
}

<div class="parent">
  <div class="segment-a">
    Float left
  </div>
  <div class="segment-b">
    Float right
  </div>
</div>

Oczywiście może to być używane tylko w przypadkach, w których nigdy nie życzysz sobie przepełnienia zawartości.

Wypróbowałem zaakceptowaną odpowiedź, ale nadal miałem problem z wyrównaniem treści. Dodanie selektora": before", jak pokazano poniżej, naprawiło problem:

// LESS HELPER
.clearfix()
{
    &:after, &:before{
       content: " "; /* Older browser do not support empty content */
       visibility: hidden;
       display: block;
       height: 0;
       clear: both;
    }
}

LESS powyżej skompiluje się do CSS poniżej:

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

Tutaj jest inna metoda ta sama rzecz ale trochę inna

Różnica polega na kropce zawartości, która jest zastępowana przez \00A0 == whitespace

Więcej na ten temat http://www.jqui.net/tips-tricks/css-clearfix/

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}

Oto jego kompaktowa wersja...

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block}

Clearfix służy do usuwania dodatkowych pływaków. Jest to klasa dodana do elementu nadrzędnego.

Mój kod clearfix jest tutaj...

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

Chociaż jest skopiowany, ale pomoże. Tutaj :before i :after są używane do wskazywania początkowych i końcowych punktów tego elementu. Natomiast clear:both nie pozwoli innym elementom pływającym po prawej lub lewej stronie tego określonego elementu zawierającego tę klasę.