CSS clearfix


Esempio

L'hack clearfix è un modo popolare per contenere i float (N. Gallagher aka @necolas)

Da non confondere con la proprietà clear , clearfix è un concetto (che è anche legato ai float, quindi alla possibile confusione). Per contenere i float , devi aggiungere la classe .cf o .clearfix sul contenitore ( il genitore ) e .clearfix uno stile a questa classe con alcune regole descritte di seguito.

3 versioni con effetti leggermente diversi (fonti: un nuovo micro clearfix hack di N. Gallagher e clearfix ricaricato da TJ Koblentz):

Clearfix (con il margine superiore di compressione dei float ancora presenti)

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

.cf:after {
    clear: both;
}

Clearfix impedisce anche il collasso dei margini superiori dei float contenuti

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

Clearfix con supporto di browser obsoleti IE6 e IE7

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

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

Codepen mostra l'effetto clearfix


Altra risorsa: tutto ciò che sai di clearfix è sbagliato (clearfix e BFC - Block Formatting Context mentre hasLayout si riferisce a browser obsoleti IE6 forse 7)