Clear

CSS vlastnost clear určuje čekání na ukončení jiných obtékaných prvků. Obtékání se nastavuje vlastností float.

clear
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

Podpora vlastnosti clear
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

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).

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

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.