CSS float określa, jak element powinien być położony. Jeżeli zdefiniujemy tę właściwość, to element nie będzie się układał jeden pod drugim, tylko stanie się tak zwanym elementem pływającym.
Jest to bardzo skrótowe wyjaśnienie, i może być nie do końca jasne. Dlatego omówimy to zagadnienie nieco szerzej i poprzemy je przykładami.
Elementy pływające
Jeżeli zdefiniujemy właściwość float, oznacza to że element staje się elementem pływającym. Oznacza to, że będzie się on układał inaczej niż standardowo. Jeżeli jest tylko wystarczająco dużo miejsca, to element pływające układają się jeden obok drugiego, zamiast jeden pod drugim.
Ponadto właściwość clear, mówi o tym czy kolejny element pływający ma się ułozyć obok, bądź też może pod spodem.
Właściwość float i clear, jest to bardzo przydatne narzędzie, które umożliwia kontrolowanie layoutu strony, dlatego ważne jest jego zrozumienie.
Właściwość float
Właściwość float, może przyjmować następujące wartości:
left- element pływający, będzie wyrównywany do lewego roguright- element pływający, będzie wyrównywany do prawego rogunone- element nie jest pływający (wartość domyślna i nie musi być definiowana)inherit- element dziedziczy wartość float od swojego rodzica
float: left;
Poniżej przykład z wykorzystaniem float: left;. Dla porównania zmodyfikuj przykład i zobacz, jak tekst się układa obok obrazka bez tej właściwości.
float: right
Przykład z wykorzystaniem float: right; jest analogiczny. Różnica polega na tym, że obraz jest wyrównany do prawej, a tekst będzie go opływać z lewej strony.
float: none
Już zalecałem, abyś przetestował, jak układają się te same elementy bez właściwości float. Ale dla porządku, poniżej jest gotowy przykład.
Podsumowanie elementów pływających
Nie jest to wyczerpanie tematu elementów pływających. W lekcji zobaczyłeś przykład, jak sprawić aby tekst opływał obrazy.
Zastosowanie float jest jednak znacznie szersze. Z jego pomocą tworzy się wielokolumnowe układy na stronie oraz całe layouty.
Dobrze planując layout strony, możesz sprawić że strona będzie responywna, ale to już jest temat na zupełnie inną lekcję.
Na koniec dodam, że właściwość float, może zostać uzupełniona właściwością clear,
która pozwoli Ci, jeszcze lepiej kontrolować układ elementów na stronie.