Jakie problemy próbujemy rozwiązać?

Istnieją dwa ważne względy przy pływających rzeczach:

1. Zawierające pływaki Potomków. oznacza to, że element, o którym mowa, jest wystarczająco wysoki, aby zawinąć wszystkie pływające potomkinie. (Nie wiszą na zewnątrz.)

   

2. Izolowanie potomków z pływaków zewnętrznych. oznacza to, że potomkowie wewnątrz elementu powinni móc używać clear: both i niech nie wchodzi w interakcje z pływakami poza żywiołem.

   

Konteksty formatowania bloków

Istnieje kilka sposobów na ustanowienie kontekstu formatowania bloków, ale rozwiązanie, które polecam, to display: inline-block z width: 100%. (Oczywiście istnieją zwykłe zastrzeżenia z użyciem width: 100%, więc użyj box-sizing: border-box lub umieść padding, margin, i border na innym elemencie.)

Najbardziej wytrzymały 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

Przejdź do js Bin , aby pobawić się kodem i zobaczyć, jak to rozwiązanie jest zbudowane od podstaw.

Tradycyjne metody clearfix uważane za szkodliwe

Problem z tradycyjnym clearfix rozwiązania 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 bloków, ale dla wszystkich innych używają wygenerowanych pól (:after) z clear: both, co nie ustanawia nowego kontekstu formatowania bloków. Oznacza to, że rzeczy nie będą zachowywać się tak samo we wszystkich sytuacjach. Aby dowiedzieć się, dlaczego jest to złe, zobacz wszystko, co wiesz o Clearfix jest złe.

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

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

Uwagi

Należy pamiętać, że clearfixes są zasadniczo hack do tego, co układy flexbox może teraz dostarczyć w znacznie mądrzejszy sposób . Pływaki CSS zostały pierwotnie zaprojektowane do przepływu treści wbudowanych - jak obrazy w długim artykule tekstowym - a nie do układów siatki i tym podobnych. If your target browsers wsparcie flexbox, warto się temu przyjrzeć.

To nie obsługuje IE7. Nie powinieneś wspierać IE7. Czyni to nadal narażać użytkowników na nieskuteczne exploity bezpieczeństwa i utrudnia życie dla wszystkich innych twórców stron internetowych, ponieważ zmniejsza presję na użytkowników i organizacje, aby przejść do nowoczesnych przeglądarek.

Ten clearfix został ogłoszony i wyjaśniony przez Thierry Koblentz w lipcu 2012. Zrzuca zbędne kilogramy z 2011 roku micro-clearfix . W tym procesie uwalnia pseudo-element na własny użytek. To zostało zaktualizowane, aby używać display: block zamiast display: table (ponownie, kredyt Thierry Koblentz).

Zalecam użycie poniższego, który jest zaczerpnięty 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;  
}

Właściwość overflow może być użyta do wyczyszczenia pływaków bez dodatkowego znacznika:

.container { overflow: hidden; }

To działa dla wszystkich przeglądarek z wyjątkiem 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

Znalazłem błąd w oficjalnej metodzie CLEARFIX: Kropka nie ma rozmiaru czcionki. A jeśli ustawisz height = 0 i pierwszy Element w twoim drzewie DOM ma klasę "clearfix" zawsze będziesz miał margines na dole strony 12px:)

Musisz to naprawić w ten sposób:

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

To całkiem porządne 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 Firefoksie 3.5+, Safari 4+, Chrome, Operze 9+, IE 6 +

W tym: przed selektor nie jest konieczne, aby wyczyścić pływaków, ale zapobiega zwijaniu się górnych marginesów w nowoczesnych przeglądarkach. To zapewnia wizualną spójność z IE 6/7, gdy zoom: 1 jest zastosowany.

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

Clearfix z bootstrap:

.clearfix {
  *zoom: 1;
}

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

.clearfix:after {
  clear: both;
}

Ja tylko używam:-

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

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

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

Stay way from floats ilekroć to możliwe

Warto wspomnieć, unikam pływaków takich jak Ebola. Jest wiele powodów i nie jestem sam; przeczytaj Rikudo odpowiedź na temat co to jest clearfix {[19] } i zobaczysz, co mam na myśli. 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 poza pływakami. Jako technologia ulepszenia i ulepszenia, flexbox (i inne metody) zostaną szeroko przyjęte, a pływaki staną się tylko złą pamięcią. Może CSS4?

Błąd Float i nieudane czyszczenie

Po pierwsze, Czasami możesz myśleć, że jesteś bezpieczny przed pływakami, dopóki nie przebijesz ratownika życia i twój przepływ html zacznie tonąć:

W kodzie http://codepen.io/omarjuvera/pen/jEXBya poniżej praktyka usuwania pływaka z <div classs="clear"></div> (lub innych element) jest powszechne, ale marszczone i antysemantyczne.

<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że, kiedy pomyślałeś, że Twój pływak jest godny żagla...bum! Gdy rozmiar ekranu staje się coraz mniejszy, zobaczysz dziwne zachowania na poniższej grafice (ta sama http://codepen.io/omarjuvera/pen/jEXBya):

Co cię to obchodzi? Około 80% (lub więcej) używanych urządzeń to urządzenia mobilne z małymi ekranami. Pulpit komputery / laptopy nie są już królem.

Na tym 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ć w codepen i grafice, tak nie jest. Najwidoczniej 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 samo!

Przynajmniej wiesz, że założysz CSS party, zapraszając wszelkiego rodzaju selektory i właściwości do strony; Robienie większego bałaganu w CSS niż to, od czego zacząłeś. Żeby naprawić Twój pływak.

CSS Clearfix na ratunek

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

To jest to! To naprawdę działa bez łamania semantyki i czy wspomniałem to 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 potrzebuję <div classs="clear"></div> <!-- Acts as a wall --> i uszczęśliwić semantyczną policję. Nie jest to jedyna korzyść. Ten clearfix reaguje na dowolny rozmiar ekranu bez użycia @media w najprostszej formie. Innymi słowy, utrzyma kontener pływakowy w ryzach i zapobiegnie powodziom. Wreszcie, zapewnia wsparcie dla starych przeglądarek w jednym małym karate chop =)

Here ' s The clearfix again

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

Zawsze pływam głównymi sekcjami mojej siatki i stosuję clear: both; do stopki. To nie wymaga dodatkowego div lub klasy.

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

Uznałem <br clear="all" /> za najłatwiejszy, najprostszy. widzenie class="clearfix" wszędzie nie może pogłaskać wrażliwości kogoś, kto sprzeciwia się zewnętrznym elementom znaczników, prawda? malujesz problem na innym płótnie.

Używam również rozwiązania display: hidden, które jest świetne i nie wymaga żadnych dodatkowych deklaracji klas ani znaczników html ... ale czasami potrzebne są elementy, aby przepełnić Pojemnik, dla np. ładne wstążki i szarfy

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

Z SASS, clearfix jest:

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

I używa się go w następujący sposób:

.container {
    @include clearfix;
}

Jeśli chcesz nowy clearfix:

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

With LESS ( http://lesscss.org/), można utworzyć poręczny helper clearfix:

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

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

<!-- HTML -->
<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

/* LESS */
div#container {
  .clearfix();
}

Za pomocą overflow:hidden/auto i wysokość dla ie6 wystarczy, jeśli pływający kontener ma element nadrzędny.

Jeden z #test może działać, aby HTML podany poniżej wyczyścił 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 ta odmawia pracy z ie6, po prostu float rodzica, aby wyczyścić float.

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

Nigdy tak naprawdę nie potrzebowałem żadnego innego rodzaju czyszczenia jeszcze. Może tak piszę swój HTML.

Próbowałem wszystkich tych rozwiązań, duży margines zostanie dodany do elementu <html> Automatycznie, gdy użyję poniższego kodu:

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

W końcu rozwiązałem problem marginesu dodając font-size: 0; do powyższego CSS.

Nowa wartość wyświetla zadanie w jednej linii.

display: flow-root;

Ze specyfikacji W3: "element generuje blokowy pojemnik i rozkłada jego zawartość za pomocą układu przepływu. Zawsze ustanawia nowy kontekst formatowania bloków dla jego zawartości."

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

※Jak pokazano w linku powyżej, wsparcie jest obecnie ograniczone, więc awaryjne Wsparcie Jak Poniżej może być przydatne: https://github.com/fliptheweb/postcss-flow-root

Też bym floatował #content, w ten sposób obie kolumny zawierają Floaty. Również dlatego, że pozwoli Ci wyczyścić elementy wewnątrz #content bez czyszczenia paska bocznego.

To samo w przypadku owijarki, musisz zrobić z niej kontekst formatowania bloków, aby owinąć obie kolumny.

Ten artykuł wymienia kilka wyzwalaczy, których możesz użyć: konteksty formatowania bloków .

Clearfix jest sposobem na automatyczne czyszczenie elementu po sobie, dzięki temu nie musisz 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;
}

Normalnie musiałbyś zrobić coś w następujący sposób:

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

Z clearfix, trzeba tylko

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

Dlaczego po prostu próbuje użyć CSS hack do tego, co 1 linia HTML zrobić zadanie. A dlaczego nie użyć semantycznego html tu put break, aby powrócić do linii?

Fo me jest naprawdę lepiej używać:

<br style="clear:both" />

I jeśli nie chcesz żadnego stylu w html, musisz użyć klasy do przerwy i umieść .clear { clear:both; } w swoim CSS.

Zalety tego:

• semantyczne użycie html do powrotu do linii
• If no CSS load it will be working
• nie potrzeba dodatkowego kodu CSS i Hack
• nie trzeba symulować br z CSS, to już istnieje w HTML

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 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 mi dobrze, nawet w IE6.

W przeciwieństwie do innych clearfixów, tutaj jest otwarty bez kontenerów

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

Jeśli ten ostatni jest twój cel, float powinien być otwarty na wszystko (akapity, uporządkowane i nieuporządkowane listy itp.), aby owinąć wokół niego, aż do napotkania "clearfix". Na przykład, clearfix może być ustawiony przez nowy nagłówek.

Dlatego używam następującego clearfix z nowymi nagłówkami:

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

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

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

Zawsze używam micro-clearfix :

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

.cf:after {
    clear: both;
}

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

W Cascade Framework stosuję go nawet domyślnie na elementach poziomu bloku. IMO, stosowanie go domyślnie na elementach na poziomie bloków daje elementom na poziomie bloków bardziej intuicyjne zachowanie niż ich tradycyjne zachowanie. To również znacznie ułatwiło mi dodanie wsparcia dla starszych przeglądarek do Cascade Framework (który obsługuje IE6-8, jak również nowoczesne przeglądarki).

Możesz też 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 rodzica div:

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

Nie musisz dodawać niczego innego do oryginalnego kodu...

#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>

Czy próbowałeś tego:

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

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

.clearfix{
    clear:both
}

A następnie wywołać 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>

Jest to tak proste, że clearfix usuwa problem, gdy używamy właściwości float wewnątrz elementu div.Jeśli użyjemy dwóch elementów div, jeden jako float: left; a drugi jako float: right; możemy użyć clearfix dla rodzica dwóch elementów div. Jeśli odmówimy korzystania z clearfix niepotrzebne spacje wypełnij zawartość poniżej i struktura witryny zostanie złamana.