CSS float & clear
0. základní vykreslování
Elementy „přiražené“ pravidlem float ke kraji stránky jsou „obtékány“ zbylým obsahem.
Veškerý zbylý obsah se naskládá do volného místa vedle obtékaného elementu a až když se tam nevleze,
pokračuje v normálním vykreslování od okraje. Je-li okno prohlížeče dostatečně široké,
začíná druhý odstavec (červený text) hned pod prvním odstavcem
(modrý text) ještě vedle obtékaného obrázku. (Zahýbejte si s velikostí
okna prohlížeče, abyste viděli, jak se to chová.)
Lorem ipsum dolor sit amet consectetuer amet ligula Curabitur rhoncus semper. Tellus leo Aliquam volutpat pellentesque tellus ultrices adipiscing elit cursus eu.
Euismod lorem pede tellus nunc Vivamus felis Vivamus Duis In et. Convallis vitae at accumsan condimentum ipsum Duis porttitor Morbi semper ornare. Curabitur Aliquam elit lacinia a feugiat Curabitur eget lobortis lacinia nunc. Pellentesque pretium risus accumsan et justo risus nibh odio elit condimentum. Est id enim pede Suspendisse dui mi pede felis Donec lorem. Ut non consectetuer justo Nulla.
Libero vitae semper tellus Phasellus congue tristique nulla elit arcu ipsum. Nibh et quis lacus Vestibulum rhoncus consequat quis et facilisis condimentum. Cras Nulla ultrices morbi Curabitur sapien condimentum netus Ut felis iaculis. Non leo augue ac a neque eget semper pellentesque In Maecenas. Phasellus congue consectetuer Maecenas consequat Nulla Pellentesque laoreet est Sed tellus. Convallis at eget id Mauris Sed mus metus vel orci tempor. Mauris dignissim.
1. „vyčištění“
Pokud bychom chtěli, aby vedle obrázku byl pouze modrý text, musíme prohlížeči před začátkem červeného textu říci,
že od tohoto místa dál už nechceme floaty sousedící s příslušným elementem
uvažovat. K tomu slouží CSS pravidlo clear: left;, které zařídí, že element, na nějž jsme ho aplikovali,
se „přesune“ z místa, kde byl v základním stavu (viz předchozí příklad) až pod všechny floaty na své levé straně.
div.clear {
clear: left;
}
Lorem ipsum dolor sit amet consectetuer amet ligula Curabitur rhoncus semper. Tellus leo Aliquam volutpat pellentesque tellus ultrices adipiscing elit cursus eu.
Euismod lorem pede tellus nunc Vivamus felis Vivamus Duis In et. Convallis vitae at accumsan condimentum ipsum Duis porttitor Morbi semper ornare. Curabitur Aliquam elit lacinia a feugiat Curabitur eget lobortis lacinia nunc. Pellentesque pretium risus accumsan et justo risus nibh odio elit condimentum. Est id enim pede Suspendisse dui mi pede felis Donec lorem. Ut non consectetuer justo Nulla.
Libero vitae semper tellus Phasellus congue tristique nulla elit arcu ipsum. Nibh et quis lacus Vestibulum rhoncus consequat quis et facilisis condimentum. Cras Nulla ultrices morbi Curabitur sapien condimentum netus Ut felis iaculis. Non leo augue ac a neque eget semper pellentesque In Maecenas. Phasellus congue consectetuer Maecenas consequat Nulla Pellentesque laoreet est Sed tellus. Convallis at eget id Mauris Sed mus metus vel orci tempor. Mauris dignissim.
2. dodatky
Pravidlo float má tři možné zajímavé nedefaultní hodnoty - left, right a both.
left způsobí přesun elementů pod floaty na jejich levé straně, right totéž pro pravou stranu
a both pro případné floaty na obou stranách tohoto elementu. Aplikováno na náš příklad nezpůsobí pravidlo
clear: right; vůbec nic, protože s červeným DIVem nesousedí žádný float na pravé straně...
div.clear {
clear: right;
}
Lorem ipsum dolor sit amet consectetuer amet ligula Curabitur rhoncus semper. Tellus leo Aliquam volutpat pellentesque tellus ultrices adipiscing elit cursus eu.
Euismod lorem pede tellus nunc Vivamus felis Vivamus Duis In et. Convallis vitae at accumsan condimentum ipsum Duis porttitor Morbi semper ornare. Curabitur Aliquam elit lacinia a feugiat Curabitur eget lobortis lacinia nunc. Pellentesque pretium risus accumsan et justo risus nibh odio elit condimentum. Est id enim pede Suspendisse dui mi pede felis Donec lorem. Ut non consectetuer justo Nulla.
Libero vitae semper tellus Phasellus congue tristique nulla elit arcu ipsum. Nibh et quis lacus Vestibulum rhoncus consequat quis et facilisis condimentum. Cras Nulla ultrices morbi Curabitur sapien condimentum netus Ut felis iaculis. Non leo augue ac a neque eget semper pellentesque In Maecenas. Phasellus congue consectetuer Maecenas consequat Nulla Pellentesque laoreet est Sed tellus. Convallis at eget id Mauris Sed mus metus vel orci tempor. Mauris dignissim.
...zatímco pravidlo clear: both; ho odsune stejně jako samotné clear: left;, protože samozřejmě
„kouká“ na obě strany, pravou i levou:
div.clear {
clear: both;
}
Lorem ipsum dolor sit amet consectetuer amet ligula Curabitur rhoncus semper. Tellus leo Aliquam volutpat pellentesque tellus ultrices adipiscing elit cursus eu.
Euismod lorem pede tellus nunc Vivamus felis Vivamus Duis In et. Convallis vitae at accumsan condimentum ipsum Duis porttitor Morbi semper ornare. Curabitur Aliquam elit lacinia a feugiat Curabitur eget lobortis lacinia nunc. Pellentesque pretium risus accumsan et justo risus nibh odio elit condimentum. Est id enim pede Suspendisse dui mi pede felis Donec lorem. Ut non consectetuer justo Nulla.
Libero vitae semper tellus Phasellus congue tristique nulla elit arcu ipsum. Nibh et quis lacus Vestibulum rhoncus consequat quis et facilisis condimentum. Cras Nulla ultrices morbi Curabitur sapien condimentum netus Ut felis iaculis. Non leo augue ac a neque eget semper pellentesque In Maecenas. Phasellus congue consectetuer Maecenas consequat Nulla Pellentesque laoreet est Sed tellus. Convallis at eget id Mauris Sed mus metus vel orci tempor. Mauris dignissim.
3. floaty na obou stranách najednou
(Jen tak pro zajímavost. Podívejte se na zdroják, jestli chcete vidět podrobnosti.)
Lorem ipsum dolor sit amet consectetuer amet ligula Curabitur rhoncus semper. Tellus leo Aliquam volutpat pellentesque tellus ultrices adipiscing elit cursus eu.
Euismod lorem pede tellus nunc Vivamus felis Vivamus Duis In et. Convallis vitae at accumsan condimentum ipsum Duis porttitor Morbi semper ornare. Curabitur Aliquam elit lacinia a feugiat Curabitur eget lobortis lacinia nunc. Pellentesque pretium risus accumsan et justo risus nibh odio elit condimentum. Est id enim pede Suspendisse dui mi pede felis Donec lorem. Ut non consectetuer justo Nulla.
Libero vitae semper tellus Phasellus congue tristique nulla elit arcu ipsum. Nibh et quis lacus Vestibulum rhoncus consequat quis et facilisis condimentum. Cras Nulla ultrices morbi Curabitur sapien condimentum netus Ut felis iaculis. Non leo augue ac a neque eget semper pellentesque In Maecenas. Phasellus congue consectetuer Maecenas consequat Nulla Pellentesque laoreet est Sed tellus. Convallis at eget id Mauris Sed mus metus vel orci tempor. Mauris dignissim.