Elementy pływające: float

Float służy do tworzenia obiektów pływających przy lewej lub prawej krawędzi elementu, w którym się znajdują. Najprostszym zastosowaniem float jest wstawianie ilustracji i adnotacji z boku tekstu — podobnie jak opływane ramki tekstowe i grafiki w programach do składu tekstu.

Float można też wykorzystać do kilku innych rzeczy, np. wstawiania inicjału (dużej ozdobnej litery na początku tekstu).

Dzięki temu, że sąsiednie elementy mające nadany float będą układać się obok siebie, używany jest też do bardziej złożonych układów — np. tworzenia kolumn lub układania list poziomo.

Najważniejsze cechy obiektów z float:

• tekst i elementy z display:inline zawsze je opływają,
• są wyjęte z normalnego biegu dokumentu — nie muszą być na ekranie w takiej kolejności, w jakiej są w dokumencie oraz mogą wystawać poza dolną krawędź obiektu, w którym się znajdują,
• tworzą swój własny bieg dokumentu, przez co kilka elementów z float nigdy nie będzie się nakładało (w przeciwieństwie do pozycjonowania absolutnego), tylko ułożą się obok siebie.

Wartości dla float

float może przyjmować wartości:

left

dla umieszczenia elementu z lewej strony

right

dla umieszczenia elementu z prawej strony

none

oznacza, że element nie będzie pływający. To jest domyślna wartość dla wszystkich elementów i zazwyczaj nie trzeba jej nadawać (chyba, że wykorzystujesz kaskadę)

Zapobieganie opływaniu

Przerywanie przez clear

Ponieważ obiekty z float są wyjęte z normalnego biegu dokumentu, mogą rozciągać się nad kilkoma innymi — np. ilustracja może rozciągać się z boku kilku akapitów.

Aby uniknąć tego efektu należy jakiemuś elementowi za elementem z float nadać właściwość clear — powoduje ona ponowne „złączenie” float z biegiem dokumentu.

clear może przyjmować wartości:

left

dany element będzie zsunięty poniżej wszystkich z float:left, ale pozwoli na opływanie go z prawej.

right

element będzie zsunięty poniżej wszystkich z float:right, ale pozwoli na opływanie go z lewej.

both

element będzie zsunięty poniżej wszystkich poprzedzających go floatów

none

Domyślna wartość oznaczająca brak wpływu na floaty (wyłącza działanie clear).

Element może mieć naraz float i clear. Wtedy będzie pływał poniżej innych elementów pływających.

Za pomocą pseudoelementów można wstawić element z clear nie modyfikując HTML. Sztuczka nazywana jest Easy Clearing.

Zawieranie elementów pływających za pomocą overflow

Element, którego overflow ma inną wartość niż visible będzie się zachowywał, jakby jego dolna krawędź miała clear:both, czyli należy nadać overflow elementowi, który zawiera elementy pływające.

 overflow:auto;
 height:auto
 Element będzie rozciągany przez elementy pływające w nim zawarte.

Układanki i kolumny

Jeśli kilka elementów obok siebie ma właściwość float, to nie będą się zakrywały, a będą układały się obok siebie.

W przypadku, gdy brakuje miejsca, elementy pływające będą spadały niżej (przenosiły się do kolejnej linii) i nie da się temu zapobiec inaczej, niż przez zagwarantowanie odpowiednio dużo miejsca na wszystkie elementy (white-space nie wpływa na float).

Jeśli kilku obiektom z float nada się szerokości tak, aby wszystkie zmieściły się w jednej linii, to można stworzyć efekt kolumn albo np. poziome menu. Należy pamiętać, że elementy, które mają się znaleźć poniżej obiektów pływających muszą mieć ustawiony clear.

float i marginesy

Margines boczny ustawiony na elementach float odsuwa je od bocznych krawędzi kontenera, odsuwa floaty od siebie oraz odsuwa opływający je tekst.

Tło bloków pod elementami pływającymi

Elementy pływające odsuwają od siebie tylko tekst statycznych (nie pływających) bloków, ale nie zmieniają ich wielkości, przez co tło i obramowanie bloków będzie wchodziło pod elementy pływające.

Można temu zaradzić jedynie ustawiając odpowiedni boczny margines blokom, nad którymi znajduje się element pływający.

float vs display

float powoduje, że elementy zachowują się jak blokowe (np. z display:block), niezależnie od ustawionej wartości display, z tym wyjątkiem, że width:auto powoduje dopasowanie się elementu do szerokości treści, a nie elementu nadrzędnego.

Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.

• Spis treści
• Kroki
• Strona Główna
• Ilustracje
• Historia zmian
• Edytuj