Quando si galleggiare parti della pagina Web all'interno di una scatola più grande, la casella più grande non si estenderà automaticamente per circondare l'intero elemento flottato. Questo è il problema con carri annidati, ma nel corso degli anni gli sviluppatori Web hanno funzionato correzioni che aggiungono galleggiante compensazione di carri nidificati per tenerli contenute all'interno dei loro elementi padre. Il metodo descritto qui aggiunge un blocco riutilizzabile di codice nel foglio di stile, che è possibile applicare come una classe per ogni tag HTML che crea un galleggiante nidificato.

istruzione

1 Aprire il foglio di stile in Blocco note o un editor di codice e creare questa nuova regola di stile:

.clearfix: dopo {
}

Questa regola di stile fa un paio di cose. La parte ".clearfix" si rivolge a una classe si aggiungere in seguito a carri annidati nel codice HTML della pagina Web. Dopo la classe, la ": dopo" pseudo-elemento crea un nuovo elemento della pagina Web dopo ogni elemento - le parti della pagina creata da tag HTML - che ha il "clearfix" nome della classe. Lo pseudo-elemento si crea cancellerà i vostri carri nidificate.

2 Imposta il tuo pseudo-elemento con il contenuto, visualizzazione a livello di blocco e l'altezza zero. Questo è solo uno dei tanti modi per farlo:

.clearfix: dopo {
visibility: hidden;
blocco di visualizzazione;
font-size: 0;
contenuto: " ";
clear: both;
altezza: 0;
}

L'idea è di creare una pseudo-elemento di blocco che contiene contenuti senza occupare spazio sulla pagina. In questo modo il dialogo che il galleggiante esiste all'interno di espandersi verso il basso in modo che il galleggiante rimane nella casella che appare, piuttosto che a sovrapporsi esso. Allo stesso tempo, il "clear: both" regola cancella il galleggiante su entrambi i lati.

3 Aggiungere un paio di hack per le versioni di Internet Explorer 6 e 7:

html .clearfix,
*: First-child + html .clearfix {
zoom: 1;
}

Questo codice va a destra dopo il ".clearfix: dopo" regola di stile.

4 Aprire la pagina Web e trovare tutti i tag che creano carri nidificati. Se non si sa quale tag per modificare, caricare la pagina in un browser e guardare il contenuto galleggiare; poi trovare il tag involucro intorno a quel contenuto nel codice HTML. Aggiungere la classe "clearfix" per tutti i tag annidati float:

<Div id = "mio_div" class = "some_class clearfix">
contenuti galleggiare qui ...
</ Div>

Nella maggior parte dei casi, i tag galleggiavano saranno div, anche se i disegni codificati in HTML5 anche "<section>" e "<aside>" tag contengono galleggiava.

Consigli e avvertenze

• Se si utilizza un sistema a griglia CSS, come ad esempio 960 Grid System, Blueprint CSS o meno quadro, i fogli di stile che è venuto con il suo pacchetto contengono già una correzione chiara. Leggi le istruzioni su come cancellare float annidati.