Schiarimento divs sono div utilizzato solo per cancellare i carri allegorici CSS (Cascading Style Sheets) in una pagina Web. Un galleggiante provoca un elemento HTML a "galleggiare" a sinistra o a destra dello schermo, e tutti gli elementi adiacenti avvolge elementi mobili. Durante la nidificazione dei carri allegorici, il div che lo contiene non si estenderà fino al bordo inferiore dell'elemento di fatto galleggiare senza un elemento di compensazione. Schiarimento divs degradano sfondi e inserire elementi sottostanti galleggianti.

Che cosa è un Div di compensazione?

Quando un Web layout di pagina contiene galleggiato elementi, è necessario eliminarli per evitare che altri elementi vi galleggiavano o altrimenti rompere il layout. Anche se è possibile aggiungere "chiaro: entrambi" ad alcun elemento CSS quando si vuole andare sotto un galleggiante anziché al lato di esso, questo metodo diventa noioso a volte e non sempre funziona. A volte è necessario nidificare un div vuoto, sgomberato per allungare un div giù dopo l'elemento fatto galleggiare, che rende lo sfondo a lavorare.

CSS per un Div di schiarimento

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

Clear () {
chiaro: entrambi;
}

Questo codice viene inserito nel foglio di stile. Una volta che si aggiunge, è possibile applicare il nome di "clear" classe a qualsiasi div..--vuoto o non..--per deselezionare qualsiasi galleggianti a sinistra e a destra il div.

Codice HTML per un Div di schiarimento

Aggiungendo il nome della classe "clear" ad un div, renderà chiaro qualsiasi galleggiante adiacente. Quando si eliminano un galleggiante per allungare un fondo giù oltre il bordo inferiore dell'elemento fatto galleggiare, è possibile utilizzare la classe "chiara" su un tag div vuoto:

< div id = "roba" >
< div id = "casella" >

Floated box content...

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

Alternative a schiarimento Divs

Alcuni sviluppatori sono contro compensazione divs perché essi inserire DIV vuoto, non semantica nel codice HTML. Il metodo alternativo all'utilizzo di un div di compensazione consiste nell'utilizzare un hack "clearfix" con un pseudo-elemento. È possibile aggiungere un pseudo-elemento..--un elemento non in effettivo formato HTML, ma il browser pensa ancora esiste..--utilizzando la ": prima"e": dopo" selettori in HTML. Alcune varianti del codice clearfix esistono on-line, ogni tentativo di utilizzare il codice più snello, efficiente e cross-browser compatibile. Questo è il "micro clearfix hack" creato da Nicolas Gallagher:

.clearfix: dopo,
.clearfix: prima {
contenuto: "";
display: table;
}
.clearfix: dopo {
chiaro: entrambi;
}
.clearfix () {
Zoom: 1;
}