Obtékání v CSS

K čemu je float? Zjednodušeně řečeno je to způsob, jak dostat různé elementy stránky vedle sebe.

Vlastnost float

Rozplavání elementu se zajistí hodnotou float, může mít tři hodnoty:

• none (výchozí; element neplave),
• left (element se snaží doplavat co nejvíce doleva)
• right (totéž, co left, jen plave doprava)

Vlastnost clear

Vlastnost clear slouží k tomu, aby element ukončil obtékání, tj. takový element (a všechny elementy následující) se nebude snažit připlout k předcházejícím s float: left nebo float: right.

Clear může nabývat 4 hodnoty:

• none (výchozí),
• left (element neobtéká elementy s float: left)
• right (neobtéká elementy s float: right)
• both (neobtéká nic)

Nejlepší je si to vyzkoušet:

Zajímavé poznatky ohledně obtékání a clearování

1. Budou-li mít všechny elementy nastaveny float jinak než na none, vyplavou z rodičovského elementu — proti tomu lze použít právě vlastnosti clear.
2. Má-li element s nastaveným clearem zároveň float, vyplavání nezabrání.
3. Nastavením prvnímu elementu float: right a druhému float: left lze prohodit pořadí sloupců.
4. Pokud se elementy do dostupného místa nevejdou, obtékání se očekávaným způsobem neprojeví.
5. Element s nastaveným floatem se stane blokovým, je-li ve výchozím stavu řádkový, proto je zbytečné nastavovat display: block.
6. Ve starších prohlížečích než Explorer 8 nelze clearovat s inline elementem.

Jednoduchý floatovaný layout

Jednoduchý dvousloupcový layout stránky pomocí obtékání může vypadat následovně (ještě je přidáno centrování):

Ukázka

(Stejně vysoké sloupce by šlo vyřešit obrázkem.)

HTML

<div class="stranka">
	<div class="hlavicka">
		<p>Logo</p>
	</div>
	<div class="obsah">
		<h1>Název stránky</h1>
		<p>Obsah</p>
	</div>
	<div class="menu">
		<ul>
			<li><a href="#">Odkaz</a></li>
		</ul>
	</div>
	<div class="paticka">
		<p>Patička</p>
	</div>
</div>

CSS

.stranka {margin: auto; width: 960px; background: #ccc}
.hlavicka {background: #1081DD; padding: 1em}
.obsah {float: right; width: 600px; padding-left: 30px; background: #E36FAF}
.menu {float: left; width: 330px;  background: #0E5EAD}
.paticka {clear: both; background: #7F8DCD; padding: 1em}

Poznámky

• Při počítání šířky, je-li použit i padding nebo border, je třeba dát pozor na box-model.
• Po obtékaných (floatovaných) elementech je nutno clearovat.

Clearování

Kromě obyčejného ukončení obtékání přes clear: both (<div style="clear: both"></div>) existují ještě další možnosti.

<br clear=all>

V dobách před CSS mohli plavat například obrázky a <br clear=all> jejich obtékání ukončovalo.

Funguje dodnes a je to velmi rychlý způsob, jak obtékání ukončit.

overflow: hidden

U clearování pomocí přenastavení overflow z výchozí hodnoty visible (overflow: hidden|auto|scroll) pro rodiče floatovaných elementů je skoro s podivem, že to funguje.

Vhodné řešení, pokud se nám nechce / není možné měnit HTML kód (ukázka).

<div style="overflow: hidden">
  <div style="float: left; width: 50%"></div>
  <div style="float: right; width: 50%"></div>
</div>

.rodic:after

Od Internet Exploreru 8 lze centrovat elementem vytvořeným pseudo-elementem :after.

.rodic:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

Ve starších Explorerech lze clearovat zapnutím hasLayoutu, tedy například:

.rodic {
	zoom: 1
}

Tím získáme rovněž řešení, kdy se nemusí zasahovat do HTML kódu a přidávat čistič (ukázka).

Element (obrázek) obtékaný textem

Umístíme-li nějaký element s floatem do běžného textu, text bude kolem elementu obtékat. Může to být například i obrázek.

Obtékaný elment před nebo za textem

V případě, že obtékaný text má být úplně vlevo nebo úplně vpravo od textu, řešení je následující:

• Má-li být vlevo, umístí se do kódu před text s float: left.
• Má-li být vpravo, umístí se do kódu před text s float: right.

Přesné nepravidelné obtékání

Samostatná ukázka

Obtékání s neznámou šířkou

Mohou se obtékat i elementy s neurčenou šířkou, je to ale takové nejisté, neb nevíme, kdy se ten či ten element roztáhne a sloupce tak skončí nechtěně pod sebou.

Odkazy jinam

• Floatování na JPW
• How Floating Works – jak funguje obtékání