Det klar CSS-ejendommen har været en del af CSS siden CSS1. Det lader dig angive, hvilke elementer der kan flyde ved siden af det rydde element og på hvilken side (r). Det klar Ejendommen har fem mulige værdier:
ingenvenstreretbeggearve
Sådan bruges CSS Clear Property
Den mest almindelige måde at bruge klar Ejendommen er, efter at du har brugt en flyde ejendom på et element. For eksempel:
- Tekst ved siden af mit billede.
- Tekst, der er under mit billede.
Alle elementer er standard til klar: ingen;, så hvis du ikke vil have andre elementer at flyde ved siden af noget, skal du ændre klar stil.
Når du rydder flyde, passer du med din klare til din flyde. Så hvis du svæver elementet til venstre, så skal du rydde til venstre. Dit flydende element fortsætter med at flyde, men det rydde element og alt efter det vises under det på websiden.
Hvis du har elementer, der flyder til både højre og venstre, kan du rydde kun en side, eller du kan rydde begge.
Brug klare layouter
Den mest almindelige måde de fleste designere bruger klar Egenskaben er i layout af sideelementer. Du kan have et billede flydende inden for en tekstblok, og du vil have det næste afsnit til at starte under billedet, eller du kan have en hel kolonne med tekst, som du vil flyde ved siden af en anden flok tekst, med en del tekst, der vises nedenfor.
Her er HTML for et layout i denne formular. Den har en div container indeholdende en anden, der er floated til venstre.
Dette virker fint, med den kortere div flydende til venstre for resten af indholdet af hoved div. Du kan rydde teksten ved siden af den flydende boks ved blot at tilføje et tag, hvor du vil have det til at begynde at skrive under den flydende boks. Men problemet kommer, når den flydende boks er længere end indholdet ved siden af det. Så, som du kan se, er hovedfarvens baggrundsfarve ikke båret ned til bunden af den flydende boks. Heldigvis er der en nem måde at løse dette på: Ejendommen. Ved at indstille hovedboksen til
En kort floated div
Indhold inde i container div, der vil være til højre for floated div.overflow: auto; Baggrundsfarven forbliver ved siden af den længere flydende boks helt nederst, som vist i dette eksempel.
