Tydlig - CSS-tricks

Anonim

Den clearegenskapen är direkt relaterad till flottar. Om elementet kan passa horisontellt i utrymmet bredvid ett annat element som är flytande kommer det att göra det. Om du inte applicerar clearpå det elementet i samma riktning som flottören. Sedan kommer elementet att röra sig ner under det flytande elementet.

Här är ett enkelt exempel på en layout konstruerad med flottörer, vilket kan vara problematiskt för sidfoten:

Men genom att rensa sidfotselementet klickar layouten på plats:

#footer ( clear: both; )

I detta fall, klart: båda; användes för att säkerställa att sidfoten rensar tidigare element som flyter i endera riktningen. Men du kan också rensa antingen lefteller righti vilket fall elementet kommer att röra sig under element som flyter i den riktningen, men inte det andra.

Ett vanligt sätt att rensa flottörer är att applicera ett pseudo-element på ett containerelement som rensar flottören. Läs mer om det här.

Webbläsarstöd

Den clearegenskapen fungerar i alla webbläsare.