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


Prvé dva bloky 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ší element - text čo tu je napisaný sa ukladá tak ako vidiš na obrazovke - rozhodne nie za 3. 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...


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 bloky sú float right...
2.
3.
ale pri tomto 3. to dajako nedopadlo... nie je úplne vpravo

xxxxxxxxxxxx

Tu v tomto 2.obaľovacom bloku nie je žiadny text a jeho výška je 10px! (padding 5px) a je dokonca vrazený do toho predchádzajúceho... (modré okraje ako je farba tohoto textu)
A áno, dokonca je obsah úplne mimo obalu...

1.
2.
3.

A toto je tretí blok, len tento text. Schválne sa pozri kam sa "napchal"...

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.

A ďalší blok je už pekne po prvom.