Forstå CSS Clear Property

De klar CSS-eiendommen har vært en del av CSS siden CSS1. Det lar deg spesifisere hvilke elementer som kan flyte ved siden av det rydde elementet og på hvilken side (e). De klar Eiendommen har fem mulige verdier:

• ingen
• venstre
• Ikke sant
• både
• arve

Slik bruker du CSS Clear Property

Den vanligste måten å bruke klar Eiendommen er etter at du har brukt en flyte eiendom på et element. For eksempel:

• Tekst ved siden av bildet mitt.
• Tekst som er under bildet mitt.

Alle elementene er standard til klar: none;, så hvis du ikke vil at andre elementer skal flyte ved siden av noe, må du endre klar stil.

Når du fjerner flyter, samsvarer du med din flytning. Så hvis du svømte elementet til venstre, bør du fjerne til venstre. Ditt flytende element vil fortsette å flyte, men det rydde elementet og alt etter det vil vises under det på nettsiden.

Hvis du har elementer som er floated både til høyre og venstre, kan du rydde bare én side, eller du kan rydde både.

Bruke klare innlayouts

Den vanligste måten de fleste designere bruker klar Egenskapen er i utforming av sideelementer. Du kan ha et bilde som flyter i en blokk med tekst og vil at neste avsnitt skal begynne under bildet, eller du kan ha en hel kolonne med tekst som du vil flyte ved siden av en annen gjeng med tekst, med litt tekst som vises nedenfor.

Her er HTML for en layout i dette skjemaet. Den har en div-beholder som holder en annen som er floated til venstre.

En kort flytende div

Innhold i container div som kommer til å være til høyre for den flytende div.

Dette vil fungere fint, med kortere div flytende til venstre for resten av innholdet i hoved div.

Du kan rydde teksten ved siden av den flytende boksen ved å bare legge til en tag hvor du vil at den skal begynne å skrive under den flytende boksen.

Men problemet kommer når den flytende boksen er lengre enn innholdet ved siden av den. Da, som du kan se, blir bakgrunnsfargen til hovedboksen ikke båret ned til bunnen av den flytende boksen.

Heldigvis er det en enkel måte å fikse dette på: eiendommen. Ved å sette hovedboksen til flow: auto; Bakgrunnsfargen vil forbli ved siden av den lengre flyteboksen helt nederst, som vist i dette eksemplet.