# Úsztatás

## Úsztatás (float)

Az úsztatott elemek a tartalmazó konténerük felső sarkába igyekeznek, az úsztatás irányában. Az előttük lévő tartalom alá úsznak be, az utánuk következő tartalom pedig körülfolyja őket.

Az úsztatott elemek nem hoznak létre sortörést, és nem tolják szét a tartalmazó konténerüket.

Ha nincs közöttük nem úsztatott elem vízszintesen egy vonalba rendeződnek az úsztatás\
irányának megfelelően.

```css
.img-left {
    float: left;
}

.img-right {
    float: right;
}
```

### Úsztatott elemek viselkedése szövegben.

Az úsztatott elemeket a szöveges tartalom, és a szövegközi elemek körbefolyják, körbeveszik.

![A szövegben az első sorban egy balra úsztatott kép, a bekezdés közepén egy jobbra úsztatott kép látható.](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-LUeSApJpoDdcUkDHL11%2F-LUecACGiEzi2oZQa6cz%2Ffloat.png?alt=media\&token=02278992-d368-442e-98d8-da70812f2468)

### Úsztatott elemek egymásra gyakorolt hatása

Az úsztatott blokkos elemek megpróbálnak egy sorba rendeződni, ezt úgy kell elképzelni, mintha betűk, vagy szavak lennének egy szövegben. Nem képeznek sortörést, és nem tolják szét az őket tartalmazó elemeket függőlegesen, így ezeknek az elemeknek be kell állítani a magasságát, vagy egyéb módon kell gondoskodni arról, hogy ne 0 legyen a magasságuk.

```css
div {
    float: left;
}
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-LUfrhhdMWdZ0g90lQq9%2F-LUfswYahRNifM9-ugGB%2Ffloat-left.png?alt=media\&token=473d694e-0d91-4e40-974c-f827c3989ab9)

```css
div {
    float: right;
}
```

![Figyeljük meg, hogy jobbra úsztatás esetén az elemek sorrendje megfordul.](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-LUfrhhdMWdZ0g90lQq9%2F-LUfthN33Jv3_MEEm1AY%2Ffloat-right.png?alt=media\&token=4deadd9f-9d43-45e8-8160-d1a888b2c7c7)

## Úsztatás törése (clear)

A `clear` értékkel rendelkező elem mellé nem kerülhet úsztatott elem (abban az esetben sem, ha maga úsztatott elem). Beállíthatjuk, hogy csak az elem bal, vagy jobb oldalán `left`, `right`,\
vagy mindkét oldalán `both` akadályozza az úsztatott elemeket. Alapérték a `none`, vagyis nincs.

```css
div {
   clear: none;
}

span {
    clear: left;
}
```

### Úsztatott elemek törése

```css
.float-left {
	float: left;
}

.clear-left {
	clear: left;
}
```

![A clear tulajdonsággal ellátott elem új sorba törik.](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-LUfrhhdMWdZ0g90lQq9%2F-LUfvMtPUJxTasPPr0Yh%2Fclear-left.png?alt=media\&token=69eb2e54-5c02-4fd2-bbe1-5f1d87c88a64)
