#1 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.
#2 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.
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;
}
#3 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;.