Che cos'è un clearfix?

Recentemente ho cercato il codice di alcuni siti Web e ho visto che ognuno <div> aveva una lezione clearfix.

Dopo una rapida ricerca su Google, ho appreso che a volte è per IE6, ma che cos'è in realtà un clearfix?

Potresti fornire alcuni esempi di un layout con un clearfix, rispetto a un layout senza un clearfix?

Se non è necessario supportare IE9 o versioni precedenti, è possibile utilizzare liberamente flexbox e non è necessario utilizzare layout fluttuati.

Vale la pena notare che oggi, l'uso di elementi fluttuati per il layout sta diventando sempre più scoraggiato dall'uso di alternative migliori.

• display: inline-block - Meglio
• Flexbox - Migliore (ma supporto browser limitato)

Flexbox è supportato da Firefox 18, Chrome 21, Opera 12.10 e Internet Explorer 10, Safari 6.1 (incluso Safari mobile) e dal browser predefinito 4.4 di Android.

Per un elenco dettagliato del browser, consultare: https://caniuse.com/flexbox .

(Forse una volta che la sua posizione sarà completamente stabilita, potrebbe essere il modo assolutamente consigliato di disporre gli elementi.)

Un clearfix è un modo per un elemento di cancellare automaticamente i suoi elementi figlio , quindi non è necessario aggiungere un markup aggiuntivo. Viene generalmente utilizzato nei layout float in cui gli elementi vengono flottati per essere impilati orizzontalmente.

Il clearfix è un modo per combattere il problema del contenitore ad altezza zero per gli elementi mobili

Un clearfix viene eseguito come segue:

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

Oppure, se non hai bisogno di supporto per IE <8, anche il seguente va bene:

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

Normalmente dovresti fare qualcosa come segue:

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

Con clearfix, hai solo bisogno di quanto segue:

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

Leggilo in questo articolo - di Chris Coyer @ CSS-Tricks

Le altre risposte sono corrette. Ma voglio aggiungere che si tratta di una reliquia del tempo in cui le persone imparavano per la prima volta CSS e abusavano floatdi fare tutto il loro layout. floatè pensato per fare cose come immagini fluttuanti accanto a lunghe tirature di testo, ma molte persone lo hanno usato come meccanismo di layout principale. Dal momento che non era proprio pensato per questo, hai bisogno di hack come "clearfix" per farlo funzionare.

Al giorno d'oggi display: inline-blockè una valida alternativa (ad eccezione di IE6 e IE7 ), anche se i browser più moderni stanno arrivando con meccanismi di layout ancora più utili sotto nomi come flexbox, layout di griglia, ecc.

Ciò clearfixconsente a un contenitore di avvolgere i suoi figli galleggianti. Senza uno clearfixstile equivalente o equivalente, un contenitore non avvolge i suoi figli galleggianti e collassa, proprio come se i suoi figli galleggianti fossero posizionati in modo assoluto.

Esistono diverse versioni del clearfix, con Nicolas Gallagher e Thierry Koblentz come autori chiave.

Se desideri supporto per browser meno recenti, è meglio utilizzare questo clearfix:

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

In SCSS, è possibile utilizzare la seguente tecnica:

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

    &:after {
        clear:both;
    }

    & {
        *zoom:1;
    }
}

#clearfixedelement {
    @extend %clearfix;
}

Se non ti interessa supportare browser meno recenti, esiste una versione più breve:

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

Offrire un aggiornamento sulla situazione nel secondo trimestre del 2017.

Una nuova proprietà di visualizzazione CSS3 è disponibile in Firefox 53, Chrome 58 e Opera 45.

.clearfix {
   display: flow-root;
}

Controlla la disponibilità per qualsiasi browser qui: http://caniuse.com/#feat=flow-root

L'elemento (con una proprietà display impostata su flow-root) genera un box contenitore di blocchi e ne espone il contenuto usando il layout del flusso. Stabilisce sempre un nuovo contesto di formattazione dei blocchi per i suoi contenuti.

Ciò significa che se si utilizza un div parent contenente uno o più figli mobili, questa proprietà garantirà che il genitore racchiuda tutti i suoi figli. Senza alcun bisogno di un hack di clearfix. Su tutti i bambini, nemmeno su un ultimo elemento fittizio (se si utilizzava la variante clearfix con: prima sugli ultimi figli).

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

In poche parole, clearfix è un trucco .

È una di quelle brutte cose con cui tutti dobbiamo solo convivere poiché è davvero l'unico modo ragionevole per garantire che elementi figlio fluttuati non trabocchino i loro genitori. Esistono altri schemi di layout, ma oggi il floating è troppo comune nel web design / sviluppo per ignorare il valore dell'hack di clearfix.

Personalmente mi rivolgo alla soluzione Micro Clearfix (Nicolas Gallagher)

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

riferimento

Una tecnica comunemente utilizzata nei layout basati su float CSS consiste nell'assegnare una manciata di proprietà CSS a un elemento che saprà conterrà elementi fluttuanti. La tecnica, che è comunemente implementata usando una definizione di classe chiamata clearfix, (di solito) implementa i seguenti comportamenti CSS:

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

Lo scopo di questi comportamenti combinati è quello di creare un contenitore :afterl'elemento attivo contenente un singolo "." contrassegnato come nascosto che cancellerà tutti i float preesistenti e reimposterà efficacemente la pagina per il prossimo contenuto.

L'altra (e forse la più semplice) opzione per ottenere un clearfix è da usare overflow:hidden;sull'elemento contenitore. Per esempio

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

Ovviamente questo può essere usato solo nei casi in cui non si desidera mai che il contenuto trabocchi.

Ho provato la risposta accettata ma ho ancora avuto problemi con l'allineamento del contenuto. L'aggiunta di un selettore ": before" come mostrato di seguito ha risolto il problema:

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

MENO sopra verrà compilato in CSS di seguito:

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

Ecco un metodo diverso, la stessa cosa, ma un po 'diverso

la differenza è il punto di contenuto che viene sostituito con un \00A0==whitespace

Maggiori informazioni su questo 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}

Eccone una versione compatta ...

.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}