CSS vlastnost clear určuje čekání na ukončení obtékaných prvků.
| 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 skončení obtékaného prvku nečekají (kdyby čekaly, tak ty prvky už 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.
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| 4, 5, 5.5, 6 | MP i Pixy uvádějí nespecifikované problémy v IE 4 a 5 u hodnot left a right | |
| Mozilla (Netscape 6+) | všechny verze | |
| Opera | 4, 5, 6, 7 | |
| Konqueror | ano | |
| IE 5 / Mac | ano | |
| Netscape Navigator 4 | chybně |
Budu mít text, vedle textu vpravo obtékaný obrázek, docela vysoký. Má následovat nadpis (<h2>) 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
<h2>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
Float = obtékání, atribut clear u tagu <br> = starší způsob clearování v html (stále podporovaný)
o tvorbě, údržbě a zlepšování internetových stránek