# 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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://the-awwwesomes-2.gitbook.io/tutorial-the-awwwesomes-html-and-css/the-awwwesomes-tutorial-www-beginners-6/oplywanie-elementow.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.