6.1. Plavání elementů - vlastnost float

Další vlastnost, která pomáhá s pozicováním prvků na stránce, je float. Definuje plavání elementu.

<p>
  <img src="latte.jpg" alt="cup of latte" class="latte">
  Cred paleo whatever, portland distillery microdosing pabst. Salvia seitan cardigan kinfolk yuccie, chia umami viral blog. Waistcoat tilde next level, tote bag stumptown four loko franzen. Small batch vice swag, offal chia kickstarter helvetica pitchfork.
  <img src="bicycle.jpg" alt="hipster bicycle" class="bicycle">
  Cornhole schlitz master cleanse, fap flannel plaid you probably haven't heard of them flexitarian tousled echo park fanny pack viral. Bushwick paleo pour-over, schlitz cred 3 wolf moon try-hard flexitarian chartreuse sustainable vegan beard. Asymmetrical pabst tumblr neutra helvetica.
</p>

.latte {
  float: left;
}
.bicycle {
  float: right;
}

Tento příklad ukazuje klasický připad pužití obtékání prvku. float odstraní prvek ze své přirozené pozice na stránce, a posune se na levou nebo pravou stranu nadřazeného prvku (rodiče). Ostatní prvky, které se nacházejí ve stejném nadřazeném prvku, budou tyto elementy obtékat.

Pozor! Příbuzná vlastnost pro float je clear. Používá se k "vyresetování" obtékání elementů. Podívejme se na příklad:

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item item-cleared"></div>
</div>

.item {
  background: lightgreen;
  width: 100px;
  height: 100px;
  margin: 5px;
  float: left;
}
.item-cleared {
  clear: both;
  background: lightblue;
}

Poslední prvek získal vlastnost clear: both;, což znamená, že se má zalomit na další řádek.

Podívejme se nyní, jak tato vlastnost ovlivňuje nadřazený prvek:

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  border: 1px solid blue;
  padding: 3px;
}
.item {
  background: lightgreen;
  width: 100px;
  height: 100px;
  margin: 5px;
  float: left;
}

Výsledek vypadá trochu špatně, že? Všechny prvky s hodnotou float: left zůstaly vně kontejneru a ten nyní vypadá prázdný. Takovéto chování lze právně napravit pomocí vlastosti clear: both, která nadřazenému prvku ukáže, kde je konec vnořených prvků s vlastností float.

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="clear"></div>
</div>

.clear {
  clear: both;
}

Obtékání (float) je často užitečné pro vytvoření jedné části stránky.

<div class="profile">
  <img src="hipster.jpg" alt="random hipster" class="profile-pic">
  <h1>Rafael Williamson</h1>
  <p>Vinyl fanny pack cardigan tousled umami slow-carb meh. Kinfolk post-ironic synth DIY heirloom, vegan schlitz.</p>
  <div class="clear"></div>
</div>

.profile {
  border: 5px solid lightgreen;
  padding: 15px;
}

.profile-pic {
  float: left;
  margin-right: 15px;
  border: 5px solid lightgreen;
}

.clear {
  clear: both;
}