Float 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:

První element

  • float:
  • clear:

Druhý element

  • float:
  • clear:

Třetí element

  • float:
  • clear:

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í

Text obtékající relativně přesně obrázek. Obrázek je nastaven jako background: url(obrazek.jpg) rodiči, kde je tento text.

V kódu před textem jsou elementy s float: right a různou šířkou, které zabírají prostor nad částí obrázku, která nemá být překryta.

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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

CSS vlastnosti content a attr

Úprava obsahu pomocí content a attr

Pomocí CSS vlastnosti content a funkce attr lze ovlivňovat z CSS výsledný textový obsah webu.

CSS transition

Animace v CSS pomocí transition

CSS vlastností transition lze na stránce docílit přechodových animací bez JavaScriptu.

CSS animace

CSS vlastnost animation

Animování prvků na stránce pomocí čistého CSS s využitím @keyframes.

Column – obsah ve sloupcích

Vícesloupcový text a column

CSS vlastnost column umožňuje rozdělení textu do více sloupců.

CSS flex

Flexboxy

Flexibilní stylování boxů je jednoduší a schopnější alternativa k obtékání (float), ale zatím hudba budoucnosti…

Komentáře