Co to jest poprawka?

1002

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?

H Bellamy
źródło
65
To nie jest dla IE 6. Clearfix zapewnia, że divwola zostanie w pełni rozwinięta do odpowiedniej wysokości, aby zamknąć pływające elementy potomne. webtoolkit.info/css-clearfix.html
Sparky

Odpowiedzi:

983

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

Duch Madary
źródło
1
tak czy inaczej z jakiegokolwiek powodu biała spacja jest lepszą praktyką niż kropka, miałem problemy z kropką w niektórych przeglądarkach, dlatego dlaczego o tym wspomniałem :) mała poprawka nie zaszkodzi :)
Val
1
content: "\00A0";\ 00A0 reprezentuje białą spację, prosta biała spacja nie działa dobrze :) przepraszam. :)
Val
14
@MadaraUchiha, dlaczego display: blok wbudowany jest lepszy niż elementy pływające? Jedynym problemem, jaki mam, jest to, że wyświetlanie za pomocą wbudowanego bloku powoduje problemy z brakiem odstępów między tagami, co nie zawsze jest łatwe do kontrolowania.
mowwwalker
2
@Kzqai: Właśnie dlatego Flexbox jest preferowaną opcją, gdy staje się bardziej obsługiwany.
Madara's Ghost
11
Nie zgadzam się, że display: inline-blockjest lepsze niż zmienne dla układu opartego na blokach. Bloki śródliniowe są, jak sama nazwa wskazuje, układane liniowo - większość układów jest oparta na blokach, a umieszczenie tych bloków w kontekście formatowania wbudowanego po prostu nie ma sensu. Musisz także poradzić sobie z różnymi problemami związanymi z formatowaniem wbudowanym, takimi jak białe elementy między elementami, inne elementy wbudowane, zmiana rozmiaru, wyrównanie itd., Jak zauważyło wiele innych. To prawda, że ​​układy zmiennoprzecinkowe też nie mają większego sensu, ale przynajmniej zmiennoprzecinkowe mają tę zaletę, że są oparte na blokach.
BoltClock
70

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.

Domenic
źródło
1
Moja praktyka polegała na tym, że nie ma powodu, aby używać float. Za każdym razem, gdy go używasz, połowa rzeczy się psuje. Używałbym go tylko wtedy, gdy potrzebuję rzeczy, aby wyczarować wewnątrz div. Blok wbudowany jest niesamowity. Nowy model pudełka jest niesamowity. Więc nie musisz już hakować, aby wyrównać w pionie.
Muhammad Umer
50
inline-blocknie jest ścisłym ulepszeniem w stosunku do liczb zmiennoprzecinkowych z powodu problemu odstępów między blokami , gdzie białe znaki w HTML przekładają się na znaki spacji oddzielające bloki. inline-blockwymaga własnych obejść , podobnie jak floatwymaga poprawki.
Rory O'Kane
41

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;
}
John Slegers
źródło
1
Niezła odpowiedź John! Zastanawiam się, dlaczego clear powoduje divzawijanie elementów pływających? Czy możesz mi pomóc to sobie wyobrazić?
Alexander Suraphel
@AlexanderSuraphel: Ta odpowiedź wyjaśnia to szczegółowo -> stackoverflow.com/questions/12871710/…
John Slegers
16

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>

Kir Kanos
źródło
1
Czy możesz opisać, co to ma wspólnego z pytaniem?
1.21 gigawatów
Prawdziwym rozwiązaniem są zmiany Clearfix, które wprowadziły dzieci nie wpływające na przepływ rodziców za pomocą sprytnych hacków flow-root.
mystrdat
11

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

JRulle
źródło
5

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.

Nathan Taylor
źródło
2

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.

Dan W.
źródło
1

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;
}
DevWL
źródło
0

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}
Val
źródło
Zastępujesz się tutaj w co najmniej 3 przypadkach. .clearfix {...}, html[xmlns] .clearfix {...}, * html .clearfix {...}, I .clearfix {...}wszystko wybrać to samo i nadpisać nawzajem. To jest trochę zuchwałe i nie jest tak naprawdę potrzebne.
ORyan
Jest to stara wersja metody usuwania błędów CSS, pobrana z css-tricks.com/snippets/css/clear-fix, którą następnie odkryłem, że „.” [Kropka] była zbyt denerwująca i zastąpiła ją białą spacją , dlatego \00A0myślę, że było tak z powodu kompatybilności między przeglądarkami i znajomości czasu.
Val