Krzysztof Zawadzki – blog

W ramach przypomnienia sobie “trików” dla css’a postanowiłem zamieścić na blogu serię wpisów dotyczących tego jakże szerokiego zagadnienia.

Tematem pierwszej części jest prawidłowe wykorzystanie znacznika float

Float – podstawowe informacje

Float wykorzystywany jest do tworzenia tzw. pływających elementów. Mogą one znajdować się przy lewej lub prawej krawędzi obiektu, w którym się znajdują. Nie można używać go do wyśrodkowania elementu w tekście. Do wyśrodkowania służy margin: 0 auto; Float może być wykorzystywany do:

• Tworzenia opływającego grafikę tekstu
• Układania list poziomo
• Tworzenia kolumn
• Wstawienia inicjału, dużej litery na początku tekstu

Wartości, które przyjmuje:

• left
• right
• none – wartość domyślna dla wszystkich elementów

Zapobieganie opływaniu

Aby spowodować wyświetlenie elementu poniżej obiektu z float należy nadać mu wartość clear. Poniższe przykłady pokazują zachowanie się elementów, mających różną wartość float:

Przykład 1

Przykład 2

Ciekawe zachowanie można zaobserwować w przykładzie 1. Element z float zostaje wyjęty z normalnego biegu dokumentu. W przykładzie 2, właściwość clear taki bieg ponownie przywołuje.

Clear może przyjmować wartości:

• left
• right
• both
• none – wartość domyślna dla wszystkich elementów

Element może mieć również obie wartości clear i float, wtedy będzie “pływał” poniżej innych floatów

Obiekt w obiekcie i overflow

Jeśli element, który zawiera elementy pływające ma właściwość overflow z wartością inną niż visible to zachowuje się tak jakby jego dolna krawędź miała clear:both;

Przykład 3

Jakiś dodatkowy tekst

Przykład 4

Jakiś dodatkowy tekst

Przykład 5

Jakiś dodatkowy tekst

Przykład 3 ilustruje prawidłowe wykorzystanie overflow, tak aby dwa pływające obiekty mieściły się w głównym boksie, a dodatkowy tekst znajdował się pod nim

Przykład 4 pokazuje, że dodanie float do elementu zawierającego w sobie obiekty z float powoduje zawarcie tych elementów wewnątrz obiektu nadrzędnego. Niestety dodatkowy tekst będzie opływać tenże obiekt z prawej strony. Można ten efekt zniwelować poprzez dodanie przed dodatkowym tekstem elementu:

i właściwość: div.clearing {clear: left; line-height:0; height:0;}. Spowoduje to pojawienie się niewidocznego elementu o zerowej wysokości, który wprowadzi kolejny obiekt (czyli np. dodatkowy tekst) do nowej linii.

Przykład 5 to sytuacja, w której elementy “pływające” nie zawierają się w elemencie nadrzędnym, dodatkowy tekst opływa elementy wewnętrzne.

Oczywiście nie są to wszystkie metody rozwiązywania problemu z opływaniem. Ciekawym, nowoczensym i wartym uwagi jest sposób z wykorzystaniem właściwości :after. Metoda jest szerzej opisana w linku numer 1.

Linki

Dodatkowe informacje o elementach pływających można znaleźć pod następującymi adresami: 1. http://www.complexspiral.com/publications/containing-floats/ 2. http://www.positioniseverything.net/easyclearing.html