Opływanie elementów

Kolejną właściwością, która pomaga nam w budowaniu layoutów, jest float, który definiuje opływanie elementów.

<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;
}

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. 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.

Edytuj na CodePen

Powyższy przykład demonstruje klasyczny przypadek użycia float i odnosi się wprost do opływania elementu tekstem. float wyjmuje element z jego naturalnej pozycji na stronie i wyrównuje odpowiednio do lewej lub prawej strony kontenera (rodzica). Pozostałe elementy, które znajdują się wewnątrz tego samego kontenera, będą go opływać.

Important::Ważne

Siostrzaną właściwością float jest clear. Służy ona do "resetowania" opływania kolejnych elementów. Spójrzmy na przykład:

<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;
}

Nasz ostatni element otrzymał właściwość clear: both, co oznacza, że zamiast opływać sąsiadujące elementy – i zostać umieszczony w tym samym rzędzie, co zielone kwadraty – pojawił się w następnej linii.

Spójrzmy jeszcze na przykład, gdzie wewnątrz kontenera znajdują się elementy z float.

<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;
}

Wygląda trochę kiepsko, prawda? Wszystkie elementy z float: left wylądowały poza kontenerem, a sam kontener wygląda na pusty. Takiemu zachowaniu można zaradzić czyszcząc opływanie i tutaj również jest pomocna właściwość clear.

<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;
}

Niestety, nie jest to wcale idealne rozwiązanie. Nie chcemy w końcu zaśmiecać naszej strony pustymi elementami użytymi tylko ze względu na wygląd. Istnieją nieco lepsze sposób, oparte na pseudoelementach (co to takiego, dowiemy się już niebawem) – tzw. micro-clearfix – oraz własności overflow.

Opływanie w CSS często przydaje się do tworzenia całych layoutów oraz poszczególnych komponentów strony.

<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;
}

Rafael Williamson

Vinyl fanny pack cardigan tousled umami slow-carb meh. Kinfolk post-ironic synth DIY heirloom, vegan schlitz.