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 być tylko po lewej lub prawej. Nie ma możliwości umieszczenia na środku strony obiektu opływanego przez tekst. Środkowanie obiektów bez opływania przez tekst robi się za pomocą
margin:auto
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ę)
Jeżeli wszystkie dzieci danego elementu są wyjęte z biegu dokumentu (np. przez
float
), to element będzie miał zerową wysokość, ponieważ nie będzie rezerwował miejsca na żaden element w nim.
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ą pseudo-elementó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
.
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
).
Ustawienie tła pod kolumnami opartymi o float wymaga sztuczki znanej jako faux columns
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ę.
Zmodyfikowano: 16.04.2007, 17:22