Quando si fa galleggiare parti del Web pagina all'interno di una scatola più grande, la scatola più grande non verrà automaticamente esteso verso il basso per racchiudere l'intero elemento fatto galleggiare. Questo è il problema con i galleggianti nidificati, ma nel corso degli anni gli sviluppatori Web hanno lavorato fuori correzioni che aggiungono galleggiante di compensazione ai carri allegorici nidificati per tenerli contenuti all'interno di elementi padre. Il metodo descritto qui aggiunge riutilizzabile un blocco di codice nel tuo foglio di stile, che è possibile applicare come una classe a tutti i tag HTML che crea un galleggiante nidificato.

Istruzioni

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 che più tardi si aggiungerà ai carri allegorici annidati nell'HTML della tua pagina Web. Dopo la classe, la ": dopo" pseudo-elemento crea un nuovo elemento nella pagina Web dopo ogni elemento – parti della pagina creata da tag HTML – che ha il nome della classe "clearfix". Lo pseudo-element che crei sarà chiaro tuo galleggianti nidificati.

2

Impostare il tuo pseudo-elemento con contenuto, livello di blocco display e altezza pari a zero. Questo è solo uno dei tanti modi per farlo:

.clearfix: dopo {
visibilità: nascosto;
display: block;
font-size: 0;
contenuto: "";
chiaro: entrambi;
Altezza: 0;
}

L'idea è di creare un pseudo-elemento di livello di blocco che contiene contenuto senza occupare spazio sulla pagina. Questo permetterà la casella che il galleggiante esiste all'interno di espandere verso il basso così il galleggiante rimane in casella, anziché di visualizzazione si sovrappongono. Allo stesso tempo, il "chiaro: entrambi" regola Cancella il galleggiante su entrambi i lati.

3

Aggiungere un paio di trucchi per Internet Explorer versioni 6 e 7:

.clearfix HTML,
*: primo-bambino + html {.clearfix
Zoom: 1;
}

Questo codice va subito dopo il ".clearfix: dopo la" regola di stile.

4

Aprire la pagina Web e trovare tutti i tag che creano galleggianti nidificati. Se non si conosce quali tag per modificare, caricare la pagina in un browser e il contenuto di galleggiare; poi trovare i tag avvolgimento intorno a quello contenuto nel codice HTML. Aggiungere la classe "clearfix" a tutti i tag nidificati galleggiante:

< div id = "my_div" class = "some_class clearfix" >
Galleggiare contenuto qui...
< / div >

Nella maggior parte dei casi, i tag fatto galleggiare sarà div, se disegni codificati in HTML5 conterrà anche fatto galleggiare "< sezione >" e "< da parte >" tag.

Consigli & Avvertenze

• Se si utilizza un sistema di griglia CSS, quali 960 Grid System, Blueprint CSS o meno Framework, i fogli di stile che è venuto con il suo pacchetto già contenere una correzione chiara. Leggere le istruzioni su come cancellare galleggianti nidificati.