Ako správne aplikovať vlastnosť clear (CSS)

Pri práci s obtekaním prostredníctvom vlastnosti float môže vývojár naraziť na problém so zrušením obtekania prostredníctvom vlastnosti clear. V tomto článku budú predstavené dva spôsoby, ktoré ignorujú zrušenie obtekania prostredníctvom vlastnosti clear.

Pre demonštrovanie problémov so zrušením obtekania je použitý HTML atribút style. V praxi je potrebné sa inline štýlom vyhýbať a používať šablóny s jazykom CSS a HTML atribút class namiesto style.

Prvý spôsob, ktorý znefunkční zápis pre zrušenie obtekania, je aplikovanie vlastnosti clear na riadkový element (napr. element <span>).

Príklad: Ignorovanie vlastnosti clear v riadkovom elemente <span>.

1
2
3
4
<div style="float : left;">Node 1 </div>
<div style="float : left;">Node 2 </div>
<span style="clear : left;"></span>
<div>Node 3 </div>
<div style="float : left;">Node 1 </div>
<div style="float : left;">Node 2 </div>
<span style="clear : left;"></span>
<div>Node 3 </div>

Z tohto dôvodu je nutné, aby vlastnosť clear bola aplikovaná na blokové elementy (napr. element <div>).

Príklad: Aplikovanie vlastnosti clear prostredníctvom blokového elementu <div>.

1
2
3
4
<div style="float : left;">Node 1 </div>
<div style="float : left;">Node 2 </div>
<div style="clear : left;"></div>
<div>Node 3 </div>
<div style="float : left;">Node 1 </div>
<div style="float : left;">Node 2 </div>
<div style="clear : left;"></div>
<div>Node 3 </div>

Druhý spôsob, ktorý znefunkční zápis pre zrušenie obtekania, je aplikovanie vlastnosti clear spolu s vlastnosťou display, konkrétne display:none. Zápis display:none pritom môže byť aj v blokovom elemente.

Príklad: Ignorovanie vlastnosti clear prostredníctvom vlastnosti display.

1
2
3
4
<div style="float : left;">Node 1 </div>
<div style="float : left;">Node 2 </div>
<div style="clear : left; display: none;"></div>
<div>Node 3 </div>
<div style="float : left;">Node 1 </div>
<div style="float : left;">Node 2 </div>
<div style="clear : left; display: none;"></div>
<div>Node 3 </div>

Vyvarovaním sa uvedených zápisov je možné predísť problémov pri tvorbe rozloženia elementov v dokumente HTML.

Záver

Pri rušení obtekania je potrebné vlastnosť clear umiestniť do blokového elementu. Blokový element nesmie obsahovať zápis display:none. V prípade, že poznáte ďalšie často používané zápisy, ktoré ignorujú použitie vlastnosti clear, a teda aj zrušenie obtekania, podeľte sa o ne prostredníctvom komentára.

Ako správne aplikovať vlastnosť clear (CSS)

Záver

Komentáre

Pridať komentár