Perché <div class="clear"></div> viene utilizzato dopo più DIV floating in un contenitore DIV?

Question

Ho incontrato uno <div class="clear"></div> in molti posti, ma non sono a conoscenza del perché è fatto? Qualcuno può informarmi su questo, perché è usato in css? Questo è il CSS:

div.clear { 
    clear:both; 
} 

Answer 1

L'altezza di un elemento è determinata dai suoi elementi figlio (a meno che non sia impostato esplicitamente). Es .:

+------A------+ 
|+-----------+| 
||  B  || 
|+-----------+| 
|+-----------+| 
||  C  || 
|+-----------+| 
+-------------+ 

L'altezza di A è determinato da dove il margine inferiore del suo bambino C è.

Ora, gli elementi galleggianti non contano verso l'altezza dei loro genitori, sono portati fuori dal flusso regolare:

+------A------+ 
+--+---------++ 
    | B | 
    +---------+ 
    +---------+ 
    | C | 
    +---------+ 

La Un elemento viene compressa ad un'altezza minima, perché i suoi due figli sono galleggiava.

elementi di compensazione sono introdotti per ripristinare la corretta altezza:

+------A------+ 
| +---------+| 
| | B || 
| +---------+| 
| +---------+| 
| | C || 
| +---------+| 
|+-----D-----+| 
+-------------+ 

L'elemento D è un elemento zero altezza con l'attributo clear impostato. Questo fa sì che cada sotto gli elementi flottati (lo cancella). Ciò fa sì che A abbia un elemento figlio regolare per calcolare la sua altezza entro. Questo è il caso d'uso più tipico, almeno.

La soluzione spesso migliore per introdurre elementi HTML aggiuntivi è impostare A a overflow: hidden. Ciò ha l'effetto di forzare un calcolo dell'altezza, che ha lo stesso effetto di aumentare l'altezza della dimensione desiderata. Questa soluzione può o non può avere altri effetti collaterali però.

Answer 2

È per cancellare gli stili fluttuanti.

chiaro: http://www.w3.org/wiki/CSS/Properties/clear

float: http://www.w3.org/wiki/CSS/Properties/float

Answer 3

Per riassumere, è come dire al browser di non consentire nulla (vale a dire, qualsiasi elemento si tratti di div, span, ancoraggio, tabella ecc.) Sia a sinistra che a destra dell'elemento precedente. Questo farà muovere l'elemento successivo alla riga successiva.

Answer 4

I problemi più comuni che affrontiamo quando scriviamo il codice con layout basati su float è che il contenitore div padre non si espande all'altezza degli elementi mobili figlio. La soluzione tipica per risolvere questo problema è aggiungendo un elemento con float chiaro dopo gli elementi mobili o aggiungendo un clearfix al div padre.

io vi do alcuni due buoni esempi per una migliore comprensione sulla cancellazione carri: -

http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow

http://www.quirksmode.org/css/clearing.html

Answer 5

buona spiegazione per deceze. Ma <div class="clear"></div> è il metodo vecchio e provare poco professionale utilizzando

#anyelement:after { display: block; content: "."; clear: both; font-size: 0; line-height: 0; height: 0; overflow: hidden; } 

solo continuare ad aggiungere altri elementi che ha bisogno di eliminato come #firstlement:after, .secondelement:after e così via.