Rozložení pomocí float

Vlastnost float, podobně jako flexbox nebo grid zarovnává a rozkládá prvky do struktur. Tato vlastnost se hojně využívala před flexbox revolucí, přičemž od té doby je na ústupu a na nových webech se téměř nepoužívá.

Rozložení float se dělí na dvě části – vlastnost float, která určuje, kam se má prvek zarovnat, a pomocná vlastnost clear, která zarovnává floatové prvky pod sebe.

Vlastnost float

Samotná vlastnost float je používána k jednoduchému zarovnání prvků; float, volně přeloženo jako vznášet se, určuje, kde se bude prvek „vznášet“ vedle jiného prvku. Vlastnost může obsahovat následující hodnoty:

• left – prvek je zarovnán doleva
• right – prvek je zarovnán doprava
• none – prvek se chová přirozeně, nic ho neovlivňuje
• inherit – prvek přebírá hodnotu rodiče

Ukázky

Prvky, které mají hodnotu vlastnosti float right nebo left jsou zarovnávány na své relativní strany. Jestliže je prvků více a všechny sdílí stejnou hodnotu, zarovnají se vedle sebe v pořadí, v jakém jsou zapsané v HTML.Upozornění: Float určuje zarovnávání pouze na ose X.

V následujícím příkladu se prvek zarovná doleva…

div {   
   float: left; 
   width: 50px; 
   height: 20px; 
   background-color: blue; } 

…v tomto budou všechny prvky vlevo, za sebou, v pořadí jako v HTML…

<div class="box">1.</div> 
<div class="box">2.</div>

.box { 
   float: left; 
   width: 50px; 
   height: 20px; 
   background-color: yellow; 
}

…a v tomto příkladu bude každý na jedné straně:

<div class="box red">1.</div> 
<div class="box green">2.</div>

.box { 
   width: 50px; 
   height: 20px; 
} 
.box.green { 
   background-color: green; 
   float: left; 
} 
.box.red { 
   background-color: red; 
   float: right; 
}

Vlastnost clear

S pomocí vlastnosti clear lze nastavit, zda se prvek posune pod prvek, jestliže se nachází na jedné nebo na obou jeho stranách – prvek, který se nachází vedle prvku s vlastností clear jej posune na další řádek podle hodnoty.

Vlastnost clear může mít následující hodnoty:

• none – základní hodnota, prvek není posunut
• left – prvek je posunut, pokud se po jeho levici nachází prvek (prvek s vlastností float: left;)
• right – prvek je posunut, pokud se po jeho pravici nachází prvek (prvek s vlastností float: right;)
• both – prvek je posunut, pokud se na jedné z jeho stran nachází prvek s vlastností float
• inherit – přebírá hodnotu rodiče

Příklad

V následujícím příkladu se nacházejí 4 prvky <div>. První dva reprezentují, jak by to vypadalo bez vlastnosti clear, zatímco druhé dva reprezentují s vlastností clear.

<p>Bez vlastnosti clear</p> 
<div class="box red">1.</div> 
<div class="box blue">2.</div> 
<br /> 
<p>S vlastností clear</p> 
<div class="box yellow">3.</div> 
<div class="box green">4.</div>

.box {    
   width: 20px; 
   height: 50px; 
} 

.box.red { 
   float: left; 
   background-color: red; 
} 

.box.blue { 
   background-color: blue; 
} 

.box.yellow { 
   float: left; 
   background-color: yellow; 
} 

.box.green { 
   clear: left; 
   background-color: green; 
}

První dva prvky <div> budou na sobě zarované vlevo, zatímco třetí a čtvrtý <div> budou pod sebou, jelikož čtvrtému je deklarována vlastnost clear: left;, která posune prvek na další řádek, protože se vedle něj nachází prvek, který má vlastnost float: left;.