Clear
CSS vlastnost clear určuje čekání na ukončení jiných obtékaných prvků. Obtékání se nastavuje vlastností float.
| hodnoty | čekání na ukončení plovoucích prvků |
|---|---|
| none | na plovoucí prvky se nečeká |
| both | prvek se vykreslí až pod všemi plovoucími prvky |
| left | prvek čeká na obtékané elementy přiražené doleva |
| right | prvek čeká na obtékané elementy přiražené doprava |
Když píšu, že prvek čeká na plovoucí objekt, tak tím myslím, že se vykreslí až pod ním. Normálně prvky na vertikální skončení jiného obtékaného prvku nečekají (kdyby čekaly, tak ty jiné prvky už vlastně nebudou obtékané).
Plovoucí objekty jsou takové prvky, které mají nastavenu css vlastnost float na hodnoty left nebo right. Obtékaný prvek může být také některý html element (nejčastěji obrázek, tabulka), který má (zastaralý) atribut align s hodnotou right nebo left.
Vlastnost clear se tedy používá u takových prvků, u kterých nechci, aby vedle nich něco bylo. Něco obtékaného, co přiteklo shora.
Pro znalce starého HTML: V HTML existuje atribut clear pouze u tagu <br>. Pozor, nemá hodnotu both, ale all.
Podpora
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| Internet Explorer | všechny verze | |
| Firefox | všechny verze | |
| Opera | všechny verze | |
| Chrome | ano |
Clear za prvkem - clearfix nebo flow-root
Clear normálně říká, že se obtékání má ukončit před nějakým prvkem. Může se ale stát, například na konci nějaké kapitoly, že u nějakého prvku třídy X vím, že po něm následující prvek Y má mít clear, jenomže prvek Y neumím vyselektovat. Potom se dá použít zápis
.X:after {clear: both; content: ""; display: block;}
(Testováno v Chrome, Firefoxu i Exploreru 11.) To :after je pseudotřída, která se běžně používá jenom u vlastnosti content.
Podobný zápis clear pro sesterskou pseudotřídu :before ztrácí smysl, protože v takovém případě stačí normálně použít clear (čistí obtékání před prvkem).
Tomuto hacku se říká clearfix.
Lepší může být relativně nová hodnota vlastnosti display: flow-root. Ta zařídí, že se za prvkem vždy udělá clear a obtékání nepoleze do dalšího prvku.
.X {display: flow-root;}
Příklady
Budu mít text, vedle textu vpravo obtékaný obrázek, docela vysoký. Má následovat nadpis (<h3>) nějakého dalšího textu.
<img src="obtekany_obrazek.jpg" width="200" height="300"
style="float: right">
text článku nad nadpisem text text text
<h3>Nadpis</h2>
Nadpis se zobrazí nalevo od obtékaného obrázku. Chci, aby ten nadpis byl až pod obrázkem, nikoli vedle něho.
<img src="obtekany_obrazek.jpg" width="200" height="300"
style="float: right">
text článku nad nadpisem text text text
<h2 style="clear: both">Nadpis</h2>
Podívejte se, jak může vypadat stránka, kde se clearování nepoužije: Kolize obtékání, příklad
Reklama
