De klar CSS-egenskapen har varit en del av CSS sedan CSS1. Den låter dig ange vilka element som kan flyta bredvid det rensade elementet och på vilken sida / sidorna. De klar egendom har fem möjliga värden:
ingenvänsterhögerbådeärva
Så här använder du CSS Clear Property
Det vanligaste sättet att använda klar egendom är när du har använt a flyta egendom på ett element. Till exempel:
- Text bredvid min bild.
- Text som ligger under min bild.
Alla element som standard till tydlig: none;, så om du inte vill att andra element ska flyta bredvid något, måste du ändra klar stil.
När du rensar flyter, matchar du din röjning till din flottör. Så om du svävar elementet till vänster, ska du rensa åt vänster. Ditt flytande element fortsätter att flyta, men det rensade elementet och allt efter det kommer att visas under det på webbsidan.
Om du har element som floats både till höger och vänster kan du radera bara en sida eller du kan rensa både.
Använda tydliga layouter
Det vanligaste sättet som de flesta designers använder klar egendom är i layout av sidelement. Du kanske har en bild som flyter i ett textblock och vill att nästa stycke börjar under bilden, eller du kan ha en hel kolumn text som du vill flyta bredvid en annan massa text, med lite text som visas nedan.
Här är HTML för en layout i denna form. Den har en div-behållare som håller en annan som är flytad till vänster.
Detta kommer att fungera bra, med den kortare diven flytande till vänster om resten av innehållet i huvud div. Du kan rensa texten bredvid den flytande rutan genom att helt enkelt lägga till en tagg där du vill att den ska börja skriva under den flytande rutan. Men problemet kommer när den flytande rutan är längre än innehållet bredvid den. Sedan, som du kan se, bärs inte bakgrundsfärgen på huvudlådan ner till botten av den flytande lådan. Lyckligtvis finns det ett enkelt sätt att fixa detta: fastigheten. Genom att ställa in huvudlådan till
En kort floated div
Innehåll inne i container div som kommer att vara till höger om floated div.overflow: auto; bakgrundsfärgen kommer att förbli bredvid den längre floated boxen längst ner, som visas i det här exemplet.
