Co to jest poprawka?

Niedawno przeglądałem kod strony i zobaczyłem, że każdy <div> ma swoją klasę clearfix.

Po szybkim wyszukiwaniu w Google dowiedziałem się, że czasami jest to IE6, ale czym właściwie jest poprawka?

Czy możesz podać kilka przykładów układu z poprawką, w porównaniu do układu bez poprawki?

Jeśli nie potrzebujesz obsługiwać IE9 lub niższej wersji, możesz swobodnie korzystać z Flexboksa i nie musisz używać układów swobodnych.

Warto zauważyć, że dziś stosowanie elementów pływających w układzie jest coraz bardziej zniechęcane przy użyciu lepszych alternatyw.

• display: inline-block - Lepszy
• Flexbox - Najlepsza (ale ograniczona obsługa przeglądarki)

Flexbox jest obsługiwany przez Firefox 18, Chrome 21, Opera 12.10 i Internet Explorer 10, Safari 6.1 (w tym Mobile Safari) i domyślną przeglądarkę Androida 4.4.

Szczegółowa lista przeglądarek znajduje się na stronie : https://caniuse.com/flexbox .

(Być może po całkowitym ustaleniu pozycji może to być absolutnie zalecany sposób układania elementów.)

Clearfix to sposób, w jaki element automatycznie usuwa swoje elementy potomne , dzięki czemu nie trzeba dodawać dodatkowych znaczników. Zwykle jest stosowany w układach pływających, w których elementy są unoszone w stos, aby można je było układać poziomo.

Clearfix jest sposobem na rozwiązanie problemu kontenera o zerowej wysokości dla elementów pływających

Usunięcie poprawki wykonuje się w następujący sposób:

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

Lub, jeśli nie potrzebujesz obsługi IE <8, następujące są również w porządku:

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

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

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

Z clearfix potrzebujesz tylko:

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

Przeczytaj o tym w tym artykule - Chris Coyer @ CSS-Tricks

Pozostałe odpowiedzi są poprawne. Ale chcę dodać, że jest to relikt czasów, gdy ludzie po raz pierwszy uczyli się CSS i wykorzystywani byli floatdo robienia całego ich układu. floatma na celu robienie rzeczy takich jak pływające obrazy obok długich serii tekstu, ale wiele osób używało go jako głównego mechanizmu układu. Ponieważ tak naprawdę nie było do tego przeznaczone, potrzebujesz hacków takich jak „clearfix”, aby działało.

Te dni display: inline-blockto solidna alternatywa ( z wyjątkiem IE6 i IE7 ), chociaż pojawiają się bardziej nowoczesne przeglądarki z jeszcze bardziej przydatnymi mechanizmami układu pod nazwami takimi jak Flexbox, układ siatki itp.

clearfixPozwala pojemnik owinąć jego płynęły dzieci. Bezclearfix podobnej stylizacji pojemnik nie otacza pływających elementów potomnych i zapada się, tak jakby jego pływające elementy były ustawione absolutnie.

Istnieje kilka wersji poprawki, w których kluczowymi autorami są Nicolas Gallagher i Thierry Koblentz .

Jeśli chcesz obsługiwać starsze przeglądarki, najlepiej użyć tej poprawki:

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

W SCSS możesz 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;
}

Aby zaoferować aktualizację sytuacji w drugim kwartale 2017 r.

Nowa właściwość wyświetlania CSS3 jest dostępna w Firefox 53, Chrome 58 i Opera 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 blokowe pudełko kontenerowe i określa jego zawartość za pomocą układu przepływu. Zawsze ustanawia nowy kontekst formatowania bloku dla swojej zawartości.

Oznacza to, że jeśli użyjesz rodzica div zawierającego jedno lub kilka pływających dzieci, ta właściwość zapewni, że rodzic otoczy wszystkie swoje dzieci. Bez potrzeby hackowania poprawki. Na dowolnych elementach podrzędnych, nawet na ostatnim elemencie obojętnym (jeśli korzystałeś z wariantu clearfix z: przed ostatnim elementem podrzędnym).

.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, aby pływające elementy potomne nie przepełniały ich rodziców. Istnieją inne schematy układu, ale obecnie pływanie jest zbyt powszechne w projektowaniu / tworzeniu stron internetowych, aby zignorować wartość włamania do poprawki.

Osobiście skłaniam się ku rozwiązaniu Micro Clearfix (Nicolas Gallagher)

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

odniesienie

Techniką powszechnie stosowaną w układach zmiennoprzecinkowych CSS jest przypisywanie garści właściwości CSS do elementu, o którym wiesz, że będzie zawierał elementy pływające. Technika, która jest powszechnie implementowana przy użyciu definicji klasy o nazwie clearfix(zwykle) 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 utworzenie kontenera :afterz aktywnym elementem zawierającym pojedynczy „.” oznaczony jako ukryty, który usunie wszystkie istniejące zmiennoprzecinkowe i skutecznie zresetuje stronę do następnego fragmentu treści.

Inną (i być może najprostszą) opcją, aby uzyskać poprawkę, jest użycie overflow:hidden;elementu zawierającego. 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żna tego użyć tylko w przypadkach, w których nigdy nie chcesz, aby treść się przepełniła.

Wypróbowałem zaakceptowaną odpowiedź, ale nadal miałem problem z wyrównaniem zawartości. Dodanie selektora „: przed”, jak pokazano poniżej, rozwiązało problem:

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

MNIEJ 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;
}

Oto inna metoda ta sama rzecz, ale trochę inna

różnicą jest kropka 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}