Hensikten med Clear DIV

Fjerne divs er divs brukes kun for å klare CSS (Cascading Style Sheets) flyter på en webside. En flottør forårsaker et HTML-element for å "flyte" til venstre eller høyre på skjermen, og alle tilstøtende elementer vil vikle rundt fløt elementer. Når hekkende flyter, vil div ikke strekke ned til nedre kant av fløt element uten en lysning element. Fjerne divs strekke ned bakgrunner og plassere elementer under flyter.

Hva er en Clearing Div?

Når en webside layout inneholder fløt elementer, må du fjerne dem for å holde andre elementer flyter opp eller på annen måte bryte layout. Selv om du kan legge til "klart: både" til noe element i CSS når du vil at den skal gå under en dupp i stedet for ved siden av seg, blir denne metoden langtekkelig til tider, og fungerer ikke alltid. Noen ganger trenger du å hekke en blank, ryddet div å strekke en div ned forbi fløt element, som gjør bakgrunnen arbeid.

CSS for en Clearing Div

Du trenger to ting for å lage en lysning div: et klassenavn og "klar" eiendom, som du må sette til "begge":

.clear {
klar: begge;
}

Denne koden går i stilarket. Når du legger til det, kan du bruke "klar" klassenavnet til noen div - tom eller ikke - å fjerne eventuelle flyter på div venstre og høyre.

HTML for en Clearing Div

Legge til "klar" klassenavnet til en div vil gjøre det klart noen tilstøtende flyte. Når du fjerner en dupp å strekke en bakgrunn ned forbi fløt elementets nedre kant, bruker du "klar" class på en tom div:

<Div id = "ting">
<Div id = "box">

Floated box content...

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

Alternativer til Fjerne Divs

Noen utviklere er mot å fjerne divs fordi de setter inn tomme, ikke-semantiske divs i HTML-koden. Den alternative metoden til ved hjelp av en lysning div er å bruke en "clearfix" hakke med et pseudo-element. Du kan legge til en pseudo-element - et element ikke i selve HTML, men leseren likevel mener det eksisterer - ved hjelp av ": før" og ": etter" velgere i HTML. Noen varianter av clearfix kode finnes på nettet, hver prøver å bruke mest mager, effektiv og kryss-nettleser kompatibel kode. Dette er den "micro clearfix hack" laget av Nicolas Gallagher:

.clearfix: etter,
.clearfix: før {
innhold: "";
display: table;
}
.clearfix: etter {
klar: begge;
}
.clearfix {
zoom: 1;
}