Slik Clear Nestede Floats

March 29

Når du flyter deler av websiden inne i en større boks, vil den store boksen ikke automatisk strekke ned å omgi hele fløt element. Dette er problemet med nestede flyter, men med årene webutviklere har fungert feilrettinger som legger float clearing til nestet flyter å holde dem inneholdt innenfor sine overordnede elementer. Metoden beskrevet her legger en gjenbrukbar blokk med kode i stilarket, som du kan bruke som en klasse for hver HTML-kode som skaper en nestet flyte.

Bruksanvisning

1 Åpne din stilark i Notepad eller en kode editor og lage denne nye stilen regel:

.clearfix: etter {
}

Denne stilen regelen gjør et par ting. Den ".clearfix" delen er rettet mot en klasse vil du senere legge til nestet flyter i HTML på websiden. Etter klassen, ": etter" pseudo-element skaper et nytt element på websiden etter hvert element - deler av siden opprettet av HTML-koder - som har "clearfix" klassenavn. Den pseudo-element du oppretter vil tømme nestet flyter.

2 Konfigurer pseudo-element med innhold, blokknivå skjerm og null høyde. Dette er bare en av mange måter å gjøre det på:

.clearfix: etter {
synlighet: skjult;
display: block;
font-size: 0;
innhold: " ";
klar: begge;
høyde: 0;
}

Ideen er å lage en blokk-nivå pseudo-element som inneholder innhold uten å ta opp noe plass på siden. Dette vil gi esken som float eksisterer i å utvide seg slik at flottøren forblir i boksen i stedet for å vises å overlappe det. Samtidig er "klart: både" regelen tømmer flyte på begge sider.

3 Legg et par hacks for Internet Explorer versjon 6 og 7:

html .clearfix,
*: Første barn + html .clearfix {
zoom: 1;
}

Denne koden går rett etter ".clearfix: etter" style regelen.

4 Åpne din webside og finne alle tagger som skaper nestet flyter. Hvis du ikke vet hvilke merker du vil redigere, laste siden i en nettleser og se på fløt innhold; deretter finne kodene innpakning rundt innholdet i HTML-koden. Tilsett "clearfix" class til alle nestet float tagger:

<Div id = "my_div" class = "some_class clearfix">
Fløt innhold her ...
</ Div>

I de fleste tilfeller vil dine fløt kodene være divs, men design kodet i HTML5 vil også inneholde fløt "<avsnitt>" og "<bortsett>" koder.

Hint

Hvis du bruker en CSS grid system, for eksempel 960 Grid System, Blueprint CSS eller Mindre Framework, stilarkene som fulgte med pakken inneholder allerede en klar løsning. Les sine instruksjoner om hvordan du fjerner nestet flyter.