Jasna osobina CSS-a je bila dio CSS-a od CSS1. Omogućava vam da odredite koji elementi mogu plutati pored očišćenog elementa i na kojoj strani. Jasna svojina ima pet mogućih vrednosti:
- nema
- levo
- desno
- oboje
- nasljediti
Kako koristiti CSS jasno svojstvo
Najčešći način korišćenja jasnog svojstva jeste kada ste na elementu koristili float svojstvo. Na primjer:
Tekst pored moje slike.
Tekst koji je ispod moje slike.
Svi elementi su podrazumevani da obrišu: nema; , pa ako ne želite da drugi elementi plutaju pored nečega, morate promijeniti jasan stil.
Kada čistite plovice, jasno se uklapate u vaš plovak. Dakle, ako ste lebdeći element lijevo, onda bi trebalo da obrišete levo. Vaš plutajući element će nastaviti da plutaju, ali očišćeni element i sve što će se pojaviti će se pojaviti ispod nje na web stranici.
Ako imate elemente koji se lebde i desno i lijevo, možete da obrišete samo jednu stranu ili možete obrisati oba.
Korišćenje jasno u Layouts
Najčešći način da većina dizajnera koristi jasno svojstvo je u izgledu elemenata stranice . Možda imate sliku koja pluta unutar bloka teksta i želite da sledeći pasus počne ispod slike, ili možda imate celu kolonu teksta koji želite da plutate pored druge grupe tekstova, a neki tekst se pojavljuje ispod.
Evo HTML-a za izgled u ovom obliku.
Ima jedan div kontejner koji drži drugu koja se lebdi levo.
Kratki plutajući div
Sadržaj unutar divizije kontejnera koji će biti desno od plivajućeg div.
Ovo će dobro funkcionirati, sa kraćim divom plutajućim levo od ostatka sadržaja glavnog div.
Tekst možete da obrišete pored plutajuće kutije jednostavnim dodavanjem oznake na kojoj želite da počnete da pišete pod lebdećom kutijom.
Ali problem dolazi kada je plutajuća kutija duže od sadržaja pored njega. Zatim, kao što vidite, boja pozadine glavne kutije se ne prenosi na dno plutajuće kutije.
Na sreću, postoji jednostavan način da se to popravi: imovina. Postavljanjem glavne kutije na preliv: auto; boje pozadine će ostati pored dulje plutajuće kutije do samog dna, kao što je prikazano u ovom primeru .