Elementy pływające: float

Float nad dokumentem bez zaczepienia

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:

float zawsze trzeba używać w połączeniu z elementami mającymi clear albo overflow, inaczej efekty jego działania będą trudne do przewidzenia.

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 Bug w IE

Float nad dokumentem zaczepiony 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).
Różne kombinacje float i clear

Element może mieć naraz floatclear. 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 Bug w IE6

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 Bug w IE

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.


Zmodyfikowano: 11.11.2009, 09:47
submit