Ukážka toho aký je float "nebezpečný"...


Prvý blok majú zhodne v sebe jeden blok s float:left; a tri bloky s float:right;.

Ak sa tam nekontroluje ich ukladanie (pomocou "clearfix" funkcie) tak to narobí obrovský chaos na stránke... Oni totiž doslova plávajú na stránke. Mimo normálneho "toku" elementov!

Okrem toho float nezabezpečí že bloky sa dajú čo najviac na kraj, ale ak je miesto tak aj vedľa seba, presne ako ten 2. a 3. tu... A aj ďalší obsah je potom problém (ďalšie elementy - text čo tu je napisaný sa ukladá tak ako vidiš na obrazovke - rozhodne nie za 3. zelený blok...).


Float sa dnes ale na upratovanie blokov na stránkach nepoužíva, a nehodí. Rieši sa to flex a grid-om. Float je len na pozíciovanie obrázkov na kraj v bloku s textom... Ale aj tam treba túto nevýhodu kontrolovať a ošetrovať.


Obaľujúci blok (šedé pozadie) nemá definovanu výšku.A akú ju potom má? Minimálnu... Ak elementy plávajú tak blok ich výšku ignoruje. Ak by dolu nebol ten "xxxxxx" text tak bude mať výšku dokonca len 10px (paddingy)!!!

1.
všetky 3 tieto zelené bloky sú float right...
2.
3.
ale pri tomto 3. to dajako nedopadlo... nie je úplne vpravo

xxxxxxxxxxxx

A toto je tretí blok, len tento text. Je pekne za modrým. A premiešaný s plávajúcimi zelenými...

V 2.obaľovacom bloku (modré okraje ako je farba tohoto textu) nie je žiadny text a jeho výška je 10px! (padding 5px). A nasleduje pekne za tým šedým.

A tu dám riešenie ako to upratať...

V skratke:
- blok musí byť fixnutý - stačí pridať class clearfix a tú takto nadefinovať:
 .clearfix::after {
 content: "";
 clear: both;
 display: table;}
- tie tri pravé bloky sa dajú do jedného "obaľovača" a ten dostane vlastnosti float. Tie malé už potom budú klasické bloky. Treba to potom ale celé upraviť v CSS - šírky a tak.

1.
2.
3.

xxxxxxxx

A ďalšie bloky sú už pekne po prvom.