Clearing div div vengono utilizzati solo per chiarire i CSS (Cascading Style Sheets) galleggia in una pagina Web. Un galleggiante provoca un elemento HTML a "galleggiare" a sinistra oa destra dello schermo, e tutti gli elementi adiacenti si avvolgono intorno a galleggiare elementi. Quando nidificazione galleggianti, il div che contiene non si estendono fino al bordo inferiore dell'elemento galleggiava senza un elemento di compensazione. div di compensazione si estendono verso il basso sfondi e oggetti posto sotto galleggianti.

Che cosa è un Clearing Div?

Quando un layout di pagina Web contiene elementi mobili, è necessario cancellare loro di tenere gli altri elementi da galleggiare o in altro modo rompere il layout. Anche se è possibile aggiungere "clear: both" a qualsiasi elemento in CSS quando si vuole andare sotto un galleggiante invece di accanto ad essa, questo metodo diventa noioso a volte e non sempre funziona. A volte è necessario un vuoto nido, div cancellata per allungare un div giù oltre l'elemento galleggiava, che rende il lavoro di fondo.

CSS per un Clearing Div

Hai bisogno di due cose per creare un div compensazione: un nome di classe e la proprietà "clear", che è necessario impostare a "entrambi":

.pulire {
clear: both;
}

Questo codice va nel foglio di stile. Una volta che si aggiunge, è possibile applicare il nome di "chiaro" di classe a qualsiasi div - vuota o non - per cancellare qualsiasi galleggia sulla sinistra del div e destra.

HTML per un Clearing Div

Aggiungendo il nome di "chiaro" di classe ad un div sarà chiarire qualsiasi galleggiante adiacente. Quando l'eliminazione di un galleggiante di allungare uno sfondo verso il basso oltre il bordo inferiore dell'elemento galleggiava, utilizzare la classe "chiaro" su un div vuoto:

<Div id = "roba">
<Div id = "box">

Floated box content...

</ Div>
<Div class = "clear"> </ div>
</ Div>

Alternative alla compensazione div

Alcuni sviluppatori sono contro di compensazione div perché inseriscono vuote, div non semantici in codice HTML. Il metodo alternativo per utilizzare un div compensazione è di utilizzare un "clearfix" hack con una pseudo-elemento. È possibile aggiungere una pseudo-elemento - un elemento non in HTML vero e proprio, ma il browser pensa ancora esiste - con il ": prima" e ": dopo" selettori in HTML. Esistono qui poche variazioni di codice clearfix, ogni tentativo di utilizzare il codice compatibile più snella, efficiente e cross-browser. Questo è il "trucco clearfix micro" creato da Nicolas Gallagher:

.clearfix: dopo,
.clearfix: prima {
contenuto: "";
display: table;
}
.clearfix: dopo {
clear: both;
}
.clearfix {
zoom: 1;
}