Što je točno float?

Float je svojstvo CSS-a koje služi za pozicioniranje elemenata na stranici. Iako se najčešće koristi, početnicima je vrlo teško shvatiti kako točno float radi i zašto se događaju određene promjene u browserima prilikom korištenja istoga. Za početak ćemo krenuti od same ideje float-a, koji je primarno zaživio u print dizajnu. Float se koristi za postavljanje elemenata, npr. slika tako da ih tekst okružuje (eng. text wrap).

U programima za izradu print dizajna, moguće je postaviti opcije za ponašanje teksta oko float elemenata (uključi / isključi text warp). Ukoliko je isključen, tekst će jednostavno preći iznad/ispod slike kao da ta slika ni ne postoji. Vrlo slično se ponašaju i browseri.

Najvažnije je znati da korištenjem float-a, element ostaje u regularnom tijeku web stranice. Najbolji primjer razlike između regularnog tijeka i elemenata koji su izvan tog tijeka je apsolutno pozicioniranje. Kada se element apsolutno pozicionira on nema više nikakav utjecaj na druge elemente oko sebe, niti drugi elementi mogu utjecati na njega (npr. pomaknuti ga malo više u stranu jer im smeta), što je jednako kao kad se isključi text warp u print dizajnu.

Float se postavlja korištenjem sljedeće CSS naredbe:

1
2
3

#side {
	float: right;
}

Za što se float koristi?

Uz jednostavno pozicioniranje slika unutar teksta, float se danas najviše koristi za izradu glavnog dizajna stranica i njime se dobija fluidnost dizanja kao što se to prije radilo sa tablicama.

Čišćenje float-a

Naredba koja se najviše koristi uz float je clear. Element koji ima CSS svojstvo clear se neće povoditi za ostalim float-anim elementima, nego će se pomaknuti niže ispod float-a.

Na primjeru vidimo najčešći problem koji se susreće, a to je da se element povlaći prema gore. Čišćenjem float-a na footer elementu osiguravamo da on zaista ostane ispod oba float-ana elementa.

1
2
3

#clear {
	clear: both;
}

Clear svojstvo ima nekoliko važećih opcija:

• both – najčešće korišten, čisti float sa lijeve i desne strane
• left – čisti float samo sa lijeve strane, desna ostaje
• right – čisti float samo sa desne strane
• none – zadana vrijednost na početku
• inherit – nasljeđen od roditeljskog elementa (nije podržano u IE)

“Urušavanje” roditeljskog elementa

Jedan od zbunjujućih rezultata kod float-a, je njihov, ponekad, čudan utjecaj na roditeljske elemente. Jedan od primjera je ako roditeljski element ne sadrži ništa osim float-anih elemenata u sebi, njegova visina će se doslovno smanjiti na 0.

Ako nemate neku pozadinu dodjeljenu tom elementu, sažimanje neće biti uopće vidljivo jer će roditeljski element praktični nestati sa ekrana, ali morate biti svjesni da je on i dalje tu. Ovaj problem se rješava upravo čišćenjem float-a, što nas opet dovodi do druge dileme – kako pravilno očistiti float.

Tehnike čišćenja float-a

Ako možete predvidjeti gdje će trebati čišćenje float-a, jednostavno primjenite clear svojstvo na željeni element. Ali naravno, stvari nisu uvijek tako jednostavne pa nam je potrebno više opcija za postizanje željenog rezultata.

• Metoda praznog diva je doslovce upravo prazan div element koji ima pridruženu opciju clear float-a <div style=”clear: both;”><div>. Ponekad ćete susresti i <br> element sa istim svojstvom, ali se večinom koristi div zbog svoje neovisnosti o browseru, točnije svi browseri imaju iste zadane postavke za <div>, dok je kod <br> stvar malo drugačija. Ovaj način podiže dosta prašine u svijetu dizajna jer je metodološki neispravno koristiti element samo radi čišćenja float-a.
• Overflow medota se primjenuje tako da se na roditeljski element dodaje CSS svojstvo overflow. Naravno, ukoliko dodajete roditeljski element samo iz razloga da čisti float, opet dolazimo do problema korištenja elemenata u dizajnerske svrhe kao i kod metode praznog diva. Također, sa overflow-om treba biti oprezan jer može odrezati dio sadržaja ili postaviti neželjene scroll barove na element.
• Easy Clearing Metoda koristi CSS selektor (:after) kako bi očistila float. Umjesto postavljanja overflow-a na roditeljski element, možete postaviti dodatnu klasu na isti (npr. clearfix u ovom slučaju). Ovo će dodati jedan mali dio sadržaja (koji se neće vidjeti) nakon roditeljskog elementa koji će očistiti float. Ova metoda ne radi baš najbolje na starim browserima i treba ju malo modificirati. Potpuni tutorial o ovoj metodi možete naći ovdje.

  1 2 3 4 5 6 7

  .clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; }

Problemi sa float-om

• Pushdown efekt se manifestira kada je sadržaj float-anog elementa veći nego sami element. Tipično, ovdje se najčešće radi o slici. Većina browsera će ovakav problem rješiti prikazivanjem slike izvan elementa, ali bez utjecaja na cjelokupni izgled stranica, dok će IE6 jednostavno susjedni element poptuno izgurati ispod i doslovce uništiti dizajn. Brzo rješenje problema je stavljanje overflow: hidden na taj element te će onda sadržaj koji je širi od elementa biti odrezan (ali se bar neće dizajn raspasti).
• Duple margine je još jedan IE6 specifičan bug, koji će jednostavno poduplati vrijednosti margine ako su u istom smjeru kao i float. Npr. lijevu marginu stavite 10px, i float-ate element ulijevo, IE će postaviti tu istu marginu na 20px. Brzo rješenje je postavljanje display: inline na float-ani element.
• 3px Jog je kada se tekst oko float-anog elementa magično pomakne za 3px. Brzo rješenje je postavljanje visine ili širine na tekst.
• Bug sa doljnjom marginom u IE7 se pojavljuje kada float-ani roditelj ima float-ane elemente unutar sebe i tada ignorira doljnju marginu koja je postavljena na tim unutranjim elementima. Brzo rješenje je korištenje paddinga na roditelju, umjesto margina na unutarnjim elementima.