Mam odwieczny problem divzawijania dwu kolumnowego układu. Mój pasek boczny jest pływający, więc mój pojemnik divnie zawija zawartości i paska bocznego.

<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

Wydaje się, że istnieje wiele metod naprawiania wyraźnego błędu w Firefoksie:

• <br clear="all"/>
• overflow:auto
• overflow:hidden

W mojej sytuacji jedynym, który wydaje się działać poprawnie <br clear="all"/>, jest nieco niechlujne rozwiązanie. overflow:autodaje mi paskudne paski przewijania i na overflow:hiddenpewno musi mieć skutki uboczne. Ponadto IE7 najwyraźniej nie powinien cierpieć z powodu tego problemu z powodu jego nieprawidłowego zachowania, ale w mojej sytuacji cierpi tak samo jak Firefox.

Która obecnie dostępna metoda jest najbardziej niezawodna?

W zależności od produkowanego projektu każde z poniższych rozwiązań CSS clearfix ma swoje zalety.

Clearfix ma przydatne aplikacje, ale został również wykorzystany jako hack. Zanim użyjesz poprawki, być może te nowoczesne rozwiązania css mogą być przydatne:

• css flexbox
• siatka css

Nowoczesne rozwiązania Clearfix

Pojemnik z overflow: auto;

Najprostszym sposobem na wyczyszczenie elementów pływających jest użycie stylu overflow: autona elemencie zawierającym. To rozwiązanie działa we wszystkich nowoczesnych przeglądarkach.

<div style="overflow: auto;">
  <img
    style="float: right;"
    src="path/to/floated-element.png"
    width="500"
    height="500"
  > 
  <p>Your content here…</p>
</div>

Jeden minus, użycie pewnych kombinacji marginesu i dopełnienia na elemencie zewnętrznym może spowodować pojawienie się pasków przewijania, ale można to rozwiązać, umieszczając margines i dopełnienie na innym elemencie zawierającym element nadrzędny.

Użycie opcji „przepełnienie: ukryte” jest również rozwiązaniem typu clearfix, ale nie będzie miało pasków przewijania, jednak użycie hiddenspowoduje wycięcie dowolnej zawartości umieszczonej poza elementem zawierającym.

Uwaga: Element pływający jest imgznacznikiem w tym przykładzie, ale może być dowolnym elementem HTML.

Clearfix Reloaded

Thierry Koblentz na CSSMojo napisał: Ponownie załadowano najnowszą wersję Clearfix . Zauważył, że rezygnując z obsługi oldIE, rozwiązanie można uprościć do jednej instrukcji css. Dodatkowo użycie display: block(zamiast display: table) pozwala na prawidłowe zwijanie marginesów, gdy elementy z clearfix są rodzeństwem.

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

To najnowocześniejsza wersja poprawki.

⋮

⋮

Starsze rozwiązania Clearfix

Poniższe rozwiązania nie są konieczne w przypadku nowoczesnych przeglądarek, ale mogą być przydatne do kierowania na starsze przeglądarki.

Pamiętaj, że te rozwiązania opierają się na błędach przeglądarki i dlatego powinny być używane tylko wtedy, gdy żadne z powyższych rozwiązań nie działa dla Ciebie.

Są one wymienione z grubsza w porządku chronologicznym.

„Beat That ClearFix”, poprawka do nowoczesnych przeglądarek

Thierry koblentz”z CSS Mojo wskazał, że podczas kierowania nowoczesnych przeglądarek, możemy teraz upuść zoomi ::beforenieruchomości / wartości i po prostu użyć:

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

To rozwiązanie celowo nie obsługuje IE 6/7…!

Thierry oferuje również: „ Słowo przestrogi : jeśli zaczynasz nowy projekt od zera, idź do niego, ale nie zamieniaj tej techniki na tę, którą masz teraz, ponieważ nawet jeśli nie obsługujesz oldIE, istniejące zasady uniemożliwiają malejące marginesy ”.

Micro Clearfix

Najnowsze i globalnie przyjęte rozwiązanie Clearfix, Micro Clearfix firmy Nicolas Gallagher .

Znana obsługa: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

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

Właściwość przepełnienia

Ta podstawowa metoda jest preferowana w zwykłym przypadku, gdy pozycjonowana zawartość nie będzie wyświetlana poza granicami kontenera.

http://www.quirksmode.org/css/clearing.html - wyjaśnia, jak rozwiązać typowe problemy związane z tą techniką, a mianowicie ustawienie width: 100%kontenera.

.container {
  overflow: hidden;
  display: inline-block;
  display: block;
}

Zamiast używać displaywłaściwości do ustawiania „hasLayout” dla IE, można użyć innych właściwości do wyzwalania „hasLayout” dla elementu .

.container {
  overflow: hidden;
  zoom: 1;
  display: block;
}

Innym sposobem na wyczyszczenie pływaków za pomocą overflowwłaściwości jest użycie hakowania podkreślenia . IE zastosuje wartości poprzedzone znakiem podkreślenia, inne przeglądarki nie. zoomWłasność wyzwala hasLayout w IE:

.container {
  overflow: hidden;
  _overflow: visible; /* for IE */
  _zoom: 1; /* for IE */
}

Podczas gdy to działa ... nie jest idealne używanie hacków.

SROKA: Łatwa metoda czyszczenia

Ta starsza metoda „łatwego czyszczenia” ma tę zaletę, że pozwala pozycjonowanym elementom wisieć poza granicami kontenera, kosztem bardziej skomplikowanego CSS.

To rozwiązanie jest dość stare, ale możesz dowiedzieć się wszystkiego o łatwym rozliczaniu pozycji jest wszystkim: http://www.positioniseverything.net/easyclearing.html

Element używający właściwości „wyczyść”

Szybkie i brudne rozwiązanie (z pewnymi wadami) do szybkiego łączenia czegoś:

<br style="clear: both" /> <!-- So dirty! -->

Wady

• Nie reaguje i dlatego może nie przynieść pożądanego efektu, jeśli style układu zmienią się na podstawie zapytań o media. Rozwiązanie w czystym CSS jest bardziej idealne.
• Dodaje znaczniki HTML bez konieczności dodawania wartości semantycznej.
• Wymaga wbudowanej definicji i rozwiązania dla każdej instancji, a nie odwołania do klasy do pojedynczego rozwiązania „clearfix” w css i odwołania do klasy w html.
• Utrudnia to pracę z kodem dla innych, ponieważ mogą być zmuszeni napisać więcej hacków, aby obejść ten kod.
• W przyszłości, gdy będziesz potrzebować / chcesz użyć innego rozwiązania Clearfix, nie będziesz musiał wracać i usuwać wszystkich <br style="clear: both" />znaczników zaśmieconych wokół znaczników.

Jakie problemy próbujemy rozwiązać?

Istnieją dwie ważne kwestie dotyczące pływających elementów:

1. Zawierające pływające potomki. Oznacza to, że element ten staje się wystarczająco wysoki, aby owinąć wszystkich pływających potomków. (Nie wiszą na zewnątrz.)

   

2. Izolowanie potomków od zewnętrznych pływaków. Oznacza to, że potomkowie wewnątrz elementu powinni móc korzystać z niego clear: bothi nie wchodzić w interakcje z elementami pływającymi na zewnątrz elementu.

   

Blokuj konteksty formatowania

Jest tylko jeden sposób na zrobienie obu tych rzeczy. I to jest ustanowienie nowego kontekstu formatowania bloku . Elementy tworzące kontekst formatowania bloku są izolowanym prostokątem, w którym elementy pływające oddziałują na siebie. Kontekst formatowania bloków zawsze będzie wystarczająco wysoki, aby wizualnie zawinąć pływających potomków, a żadne elementy pływające poza kontekstem formatowania bloków nie mogą wchodzić w interakcje z elementami wewnątrz. Ta dwustronna izolacja jest dokładnie tym, czego chcesz. W IE ta sama koncepcja nazywa się hasLayout , którą można ustawić za pomocą zoom: 1.

Istnieje kilka sposobów, aby ustanowić bloku formatowania kontekstu, ale rozwiązanie polecam jest display: inline-blockz width: 100%. (Oczywiście, nie są zwykłe ostrzeżenia o użyciu width: 100%, więc użycie box-sizing: border-boxlub put padding, marginiborder na innym elemencie).

Najbardziej niezawodne 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

Idź do JS Bin aby pobawić się kodem i zobaczyć, jak to rozwiązanie jest budowane od podstaw.

Tradycyjne metody usuwania błędów uważane za szkodliwe

Problem z tradycyjnymi rozwiązaniami Clearfix 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 bloku, ale dla wszystkich innych używają wygenerowanego pola ( ) z , który nie ustanawia nowego kontekstu formatowania bloku. Oznacza to, że rzeczy nie zachowają się tak samo we wszystkich sytuacjach. Aby uzyskać wyjaśnienie, dlaczego jest to złe, zobacz Wszystko, co wiesz o Clearfix jest błędne .:afterclear: both

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

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

Notatki

Należy pamiętać, że poprawki są zasadniczo włamaniem do tego, co układy Flexbox mogą teraz zapewnić w znacznie mądrzejszy sposób . Elementy zmiennoprzecinkowe CSS zostały pierwotnie zaprojektowane z myślą o przepływie treści wbudowanych - jak obrazy w długim artykule tekstowym - a nie układach siatki i tym podobnych. Jeśli Twoje docelowe przeglądarki obsługują Flexbox , warto się temu przyjrzeć.

To nie obsługuje IE7. Nie powinieneś wspierać IE7. Takie postępowanie nadal naraża użytkowników na nieusunięte exploity bezpieczeństwa i utrudnia życie wszystkim innym twórcom stron internetowych, ponieważ zmniejsza presję na użytkowników i organizacje na przechodzenie na nowoczesne przeglądarki.

Ta poprawka została ogłoszona i wyjaśniona przez Thierry Koblentza w lipcu 2012 r. Zrzuca zbędną wagę z mikro- poprawki Nicolasa Gallaghera z 2011 r . W ten sposób uwalnia pseudoelement do własnego użytku. Zostało to zaktualizowane, aby użyć display: blockzamiast display: table(ponownie, kredyt dla Thierry Koblentz).

Zalecam użycie następujących, pobranych 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ść przelewu może być używana do usuwania pływaków bez dodatkowego narzutu:

.container { overflow: hidden; }

Działa to we wszystkich przeglądarkach oprócz 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: DOT nie ma rozmiaru czcionki. A jeśli ustawiszheight = 0 i pierwszy element w drzewie DOM ma klasę „clearfix”, zawsze będziesz mieć margines na dole strony o wielkości 12 pikseli :)

Musisz to naprawić w następujący sposób:

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

Jest teraz częścią układu YAML ... Spójrz na to - to bardzo interesujące! http://www.yaml.de/en/home.html

To dość schludne 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 Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

Włączenie selektora: before nie jest konieczne do wyczyszczenia pływaków, ale zapobiega zawaleniu górnych marginesów w nowoczesnych przeglądarkach. Zapewnia to spójność wizualną z IE 6/7 po zastosowaniu zoomu: 1.

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

Po prostu używam:

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

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

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

Zawsze, gdy to możliwe, trzymaj się z dala od pływaków

Warto wspomnieć, unikam pływaków jak Ebola. Jest wiele powodów i nie jestem sam; Przeczytaj odpowiedź Rikudo o tym, co jest poprawką, a zobaczysz, co mam na myśli. Jego 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 inne niż zmiennoprzecinkowe. Wraz z postępem i ulepszaniem technologii, flexbox (i inne metody) będą szeroko stosowane, a zmiennoprzecinkowe stanie się po prostu złą pamięcią. Może CSS4?

Niewłaściwe zachowanie pływaka i nieudane czyszczenie

Po pierwsze, czasami możesz myśleć, że jesteś bezpieczny przed pływakami, dopóki twój ratownik nie zostanie przekłuty, a przepływ HTML zacznie spadać:

W codepen http://codepen.io/omarjuvera/pen/jEXBya poniżej praktyka czyszczenia pływaka za pomocą <div classs="clear"></div>(lub innego elementu) jest powszechna, ale marszczy brwi i jest antysemantyczna.

<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 tylko wtedy, gdy pomyślałeś, że twój pływak jest godny żagla ... bum! Gdy rozmiar ekranu staje się coraz mniejszy, widać dziwne zachowania, takie jak na poniższej grafice (Same http://codepen.io/omarjuvera/pen/jEXBya ):

Dlaczego powinno Cię to obchodzić? Nie jestem pewien dokładnej liczby, ale około 80% (lub więcej) używanych urządzeń to urządzenia mobilne z małymi ekranami. Komputery stacjonarne / laptopy nie są już królem.

To 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ć na codepen i grafice, tak nie jest. Najwyraźniej 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 jest to samo!

Co najmniej wiesz, że zaczniesz imprezę CSS, zapraszając na nią wszelkiego rodzaju selektory i właściwości; robiąc większy bałagan w CSS niż od tego, co zacząłeś. Po prostu napraw swój pływak.

CSS Clearfix na ratunek

Ten prosty i bardzo elastyczny kawałek CSS jest pięknem i „wybawcą”:

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

Otóż ​​to! To naprawdę działa bez łamania semantyki i czy wspominałem, że 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 potrzebujemy <div classs="clear"></div> <!-- Acts as a wall -->i utrzymujemy radość semantycznej policji. To nie jedyna korzyść. Ta poprawka reaguje na każdy rozmiar ekranu bez użycia@media w najprostszej formie. Innymi słowy, utrzyma kontrolę nad pływakiem i zapobiegnie powodziom. Wreszcie, obsługuje stare przeglądarki w jednym małym kotletu karate =)

Oto znowu poprawka

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

Zawsze przesuwam główne sekcje mojej siatki i odnoszę się clear: both;do stopki. To nie wymaga dodatkowej dywizji lub klasy.

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

uważam, że <br clear="all" />jest najłatwiejszy, najprostszy. widzenie class="clearfix"wszędzie nie może wywołać wrażliwości kogoś, kto sprzeciwia się obcym elementom markeup, prawda? po prostu malujesz problem na innym płótnie.

Używam również display: hiddenrozwiązania, które jest świetne i nie wymaga żadnych dodatkowych deklaracji klasy ani znaczników HTML ... ale czasami potrzebujesz elementów, aby przepełnić kontener, na przykład. ładne wstążki i skrzydła

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

Wypróbowałem wszystkie te rozwiązania, duży margines zostanie dodany do <html>elementu automatycznie, gdy użyję poniższego kodu:

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

Wreszcie rozwiązałem problem marży, dodając font-size: 0;do powyższego CSS.

W przypadku SASS poprawka to:

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

i jest używany jak:

.container {
    @include clearfix;
}

jeśli chcesz nowego clearfix:

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

Za pomocą LESS ( http://lesscss.org/ ) można stworzyć przydatnego pomocnika usuwania błędów:

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

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

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

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

Użycie overflow:hidden/ autoi wysokość dla ie6 wystarczy, jeśli pływający pojemnik ma element nadrzędny.

Każdy z #testów może działać, ponieważ podany poniżej kod HTML usuwa 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 odmawia pracy z ie6, po prostu ustaw element nadrzędny, aby wyczyścić element zmiennoprzecinkowy.

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

Nigdy tak naprawdę nie potrzebowałem żadnego innego rodzaju czyszczenia. Może w ten sposób piszę mój HTML.

Nowa wartość wyświetlania wydaje się zadaniu w jednym wierszu.

display: flow-root;

Ze specyfikacji W3: „Element generuje pudełko kontenera bloków i określa jego zawartość za pomocą układu przepływu. Zawsze ustanawia nowy kontekst formatowania bloku dla swojej zawartości”.

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

※ Jak pokazano w powyższym linku, wsparcie jest obecnie ograniczone, więc może być przydatne wsparcie zastępcze, takie jak poniżej: https://github.com/fliptheweb/postcss-flow-root

Też bym się unosił #content, w ten sposób obie kolumny zawierają zmiennoprzecinkowe . Również dlatego, że pozwoli ci wyczyścić elementy w środku#content bez usuwania paska bocznego.

Tak samo jest z opakowaniem, trzeba by uczynić go kontekstem formatowania bloku, aby zawinąć dwie kolumny.

W tym artykule wymieniono kilka wyzwalaczy, których można użyć: konteksty formatowania bloków .

Clearfix to sposób na automatyczne czyszczenie elementu po sobie, dzięki czemu nie trzeba 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;
}

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

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

Dzięki clearfix wystarczy

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

Dlaczego po prostu próbujesz użyć hacka css, aby zrobić to, co robi 1 linia HTML. A dlaczego nie użyć semantycznego html tu put break, aby powrócić do wiersza?

Dla mnie naprawdę lepiej jest użyć:

<br style="clear:both" />

A jeśli nie chcesz żadnego stylu w swoim html, musisz po prostu użyć klasy na przerwę i umieścić .clear { clear:both; }w CSS.

Zaleta tego:

• Semantyczne użycie html do powrotu do linii
• Jeśli nie zostanie załadowany CSS, będzie działał
• Nie potrzebujesz dodatkowego kodu CSS i Hack
• nie trzeba symulować br z CSS, 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 chciał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 dobrze dla mnie, nawet w IE6.

W przeciwieństwie do innych wyraźnych poprawek, tutaj jest otwarty bez pojemników

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

Sam fakt, że należy zaznaczyć koniec pływaka, nie pozwala na bezobsługowe składanie CSS .

Jeśli twoim celem jest ten ostatni, zmiennoprzecinkowy powinien pozostać otwarty na wszystko (akapity, uporządkowane i nieuporządkowane listy itp.), Aby go owijać, dopóki nie pojawi się „clearfix”. Na przykład poprawka może być ustawiona przez nowy nagłówek.

Dlatego używam następującej poprawki z nowymi nagłówkami:

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

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

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

Zawsze używam mikro-clearfix :

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

.cf:after {
    clear: both;
}

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

W Cascade Framework nawet domyślnie stosuję go do elementów na poziomie bloku. IMO, stosując go domyślnie do elementów na poziomie bloku, zapewnia elementom na poziomie bloku bardziej intuicyjne zachowanie niż ich tradycyjne zachowanie. Ułatwiło mi to także dodanie obsługi starszych przeglądarek do Cascade Framework (która obsługuje IE6-8, a także nowoczesne przeglądarki).

Możesz również 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 div rodzica:

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

Nie musisz dodawać nic więcej do oryginalnego kodu ...

Czy próbowałeś tego:

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

Nie miałem żadnych problemów z tą metodą.

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

.clearfix{
    clear:both
}

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

To takie proste, poprawka usuwa problem, gdy używamy właściwości float wewnątrz elementu div. Jeśli używamy dwóch elementów div, jeden jako float: left; a drugi jako float: prawo; możemy użyć clearfix dla elementu nadrzędnego dla dwóch elementów div. Jeśli odmówimy skorzystania z clearfix, niepotrzebne spacje wypełnij treścią poniżej, a struktura witryny ulegnie zniszczeniu.