A seconda del design che viene prodotto, ciascuna delle soluzioni CSS clearfix di seguito ha i suoi vantaggi.
Il clearfix ha applicazioni utili ma è stato anche usato come hack. Prima di usare un clearfix forse queste moderne soluzioni CSS possono essere utili:
Moderne soluzioni Clearfix
Contenitore con overflow: auto;
Il modo più semplice per cancellare gli elementi fluttuati è usare lo stile overflow: autosull'elemento contenitore. Questa soluzione funziona in tutti i browser moderni.
<div style="overflow: auto;">
<img
style="float: right;"
src="path/to/floated-element.png"
width="500"
height="500"
>
<p>Your content here…</p>
</div>
Un aspetto negativo, l'uso di determinate combinazioni di margine e riempimento sull'elemento esterno può causare la visualizzazione di barre di scorrimento, ma ciò può essere risolto posizionando il margine e il riempimento su un altro elemento genitore contenente.
L'uso di 'overflow: hidden' è anche una soluzione clearfix, ma non avrà barre di scorrimento, tuttavia l'utilizzo ritaglierà hiddenqualsiasi contenuto posizionato all'esterno dell'elemento contenitore.
Nota: l'elemento floated è un imgtag in questo esempio, ma potrebbe essere qualsiasi elemento html.
Clearfix Reloaded
Thierry Koblentz su CSSMojo ha scritto: L'ultimo clearfix ricaricato . Ha notato che lasciando cadere il supporto per oldIE, la soluzione può essere semplificata in un'istruzione css. Inoltre, l'utilizzo display: block(anziché display: table) consente ai margini di collassare correttamente quando gli elementi con clearfix sono fratelli.
.container::after {
content: "";
display: block;
clear: both;
}
Questa è la versione più moderna di clearfix.
⋮
⋮
Soluzioni Clearfix precedenti
Le soluzioni seguenti non sono necessarie per i browser moderni, ma possono essere utili per il targeting di browser meno recenti.
Tieni presente che queste soluzioni si basano su bug del browser e pertanto dovrebbero essere utilizzate solo se nessuna delle soluzioni sopra descritte funziona per te.
Sono elencati approssimativamente in ordine cronologico.
"Beat That ClearFix", un clearfix per i browser moderni
Thierry Koblentz' di CSS Mojo ha sottolineato che quando si mira browser moderni, ora possiamo cadere il zoome ::beforedi proprietà / valori e utilizzare semplicemente:
.container::after {
content: "";
display: table;
clear: both;
}
Questa soluzione non supporta IE 6/7 ... apposta!
Thierry offre anche: " Un avvertimento : se avvii un nuovo progetto da zero, fallo, ma non scambiare questa tecnica con quella che hai adesso, perché anche se non supporti oldIE, le tue regole esistenti impediscono margini di collasso ".
Micro Clearfix
La soluzione Clearfix più recente e adottata a livello globale, Micro Clearfix di Nicolas Gallagher .
Supporto noto: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+
.container::before, .container::after {
content: "";
display: table;
}
.container::after {
clear: both;
}
.container {
zoom: 1;
}
Proprietà di overflow
Questo metodo di base è preferito per il solito caso, quando il contenuto posizionato non verrà mostrato al di fuori dei limiti del contenitore.
http://www.quirksmode.org/css/clearing.html
- spiega come risolvere i problemi comuni relativi a questa tecnica, vale a dire, l'impostazione width: 100%sul contenitore.
.container {
overflow: hidden;
display: inline-block;
display: block;
}
Anziché utilizzare la displayproprietà per impostare "hasLayout" per IE, è possibile utilizzare altre proprietà per attivare "hasLayout" per un elemento .
.container {
overflow: hidden;
zoom: 1;
display: block;
}
Un altro modo per cancellare i float usando la overflowproprietà è usare l' hackcore di sottolineatura . IE applicherà i valori preceduti dal carattere di sottolineatura, gli altri browser no. La zoomproprietà innesca hasLayout in IE:
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
Mentre funziona ... non è l'ideale usare gli hack.
Torta: metodo di schiarimento facile
Questo vecchio metodo "Easy Clearing" ha il vantaggio di consentire agli elementi posizionati di rimanere fuori dai limiti del contenitore, a spese di CSS più complicati.
Questa soluzione è piuttosto vecchia, ma puoi imparare tutto su Easy Clearing on Position Is Everything: http://www.positioniseverything.net/easyclearing.html
Elemento che utilizza la proprietà "clear"
La soluzione rapida e sporca (con alcuni inconvenienti) per quando schiacci rapidamente qualcosa insieme:
<br style="clear: both" /> <!-- So dirty! -->
svantaggi
- Non è reattivo e quindi potrebbe non fornire l'effetto desiderato se gli stili di layout cambiano in base alle query multimediali. Una soluzione in puro CSS è più ideale.
- Aggiunge markup html senza necessariamente aggiungere alcun valore semantico.
- Richiede una definizione e una soluzione incorporate per ogni istanza piuttosto che un riferimento di classe a una singola soluzione di un "clearfix" nel CSS e riferimenti di classe ad esso nel codice HTML.
- Rende il codice difficile da lavorare con gli altri in quanto potrebbero dover scrivere più hack per aggirare il problema.
- In futuro, quando è necessario / si desidera utilizzare un'altra soluzione clearfix, non sarà necessario tornare indietro e rimuovere tutti i
<br style="clear: both" />tag disseminati attorno al markup.
