> For the complete documentation index, see [llms.txt](https://the-awwwesomes-2.gitbook.io/tutorial-the-awwwesomes-html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://the-awwwesomes-2.gitbook.io/tutorial-the-awwwesomes-html-and-css/the-awwwesomes-tutorial-www-beginners-6/oplywanie-elementow.md).
# 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.
```markup
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.
```
```css
.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](http://codepen.io/theawwwesomes/pen/oLoBRJ)
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:
>
> ```markup
>
> ```
>
> ```css
> .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`.
>
> ```markup
>
> ```
>
> ```css
> .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`.
>
> ```markup
>
> ```
>
> ```css
> .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*](http://nicolasgallagher.com/micro-clearfix-hack/) – oraz [własności `overflow`](http://www.forumweb.pl/porady-i-tutoriale-www/css-clearowanie-czyli-problemy-z-float,47914).
Opływanie w CSS często przydaje się do tworzenia całych layoutów oraz poszczególnych komponentów strony.
```markup
Rafael Williamson
Vinyl fanny pack cardigan tousled umami slow-carb meh. Kinfolk post-ironic synth DIY heirloom, vegan schlitz.
```
```css
.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.