Razumijevanje CSS Floata

CSS svojstvo je vrlo važan svojstvo za izgled. Omogućuje vam da postavite svoje web stranice točno onako kako želite da vam se prikazuju - ali kako biste ih mogli koristiti morate razumjeti kako to funkcionira.

U listi stila CSS float nekretnina izgleda ovako:

pravilno {float: pravo; }

Ovo govori pregledniku da sve s klasom "desno" treba pustiti na desno.

Ovako biste ga dodijelili:

class = "pravo" />

Što možete Float s CSS float svojstvom?

Ne možete plutaju svaki element na web stranici. Možete pluta samo elemente na razini bloka. To su elementi koji zauzimaju blok prostora na stranici, kao što su slike (), stavci (), odjeljci () i popisi ().

Drugi elementi koji utječu na tekst, ali ne stvaraju okvir na stranici nazivaju se inline elementi i ne mogu se plutati. To su elementi kao što su span (), linije pauze (), jaki naglasak () ili kurziv ().

Gdje plutaju?

Možete plutajuće elemente s desne ili lijeve strane. Bilo koji element koji slijedi plutajuće element će protjecati oko plutajućeg elementa s druge strane.

Na primjer, ako plutajući sliku slijeva, svaki tekst ili drugi elementi koji će ga slijediti proći će oko nje desno. A ako plutajući sliku s desne strane, svaki tekst ili drugi elementi koji će ga slijediti proći će oko nje lijevo. Slika koja se nalazi u bloku teksta bez ikakvog plutajućeg stila koja se primjenjuje na njega će se prikazati, međutim, preglednik je postavljen za prikaz slika. Ovo je obično s prvom retkom sljedećeg teksta prikazanog na dnu slike.

Koliko će daleko plutaju?

Element koji je plutao kretat će se toliko lijevo ili desno od elementa spremnika koliko god može. To rezultira u nekoliko različitih situacija ovisno o tome kako je napisan vaš kôd. Za ove primjere, ja ću plutati malo DIV element lijevo:

• Ako plutajući element nema unaprijed definiranu širinu, on će zauzeti onoliko horizontalno mjesto koliko je potrebno i dostupno, bez obzira na plovak. Napomena: neki preglednici pokušavaju staviti elemente pokraj elemenata koji se plivaju kada širina nije definirana - obično daju element koji ne pluta samo mali dio prostora. Dakle, trebali biste uvijek odredite širinu na plutajućim elementima.
• Ako je element spremnika HTML element, plutao DIV sjedit će se na lijevoj strani stranice.
• Ako je element spremnika sam po sebi sadržan, plutao DIV sjedit će na lijevoj strani kontejnera.
• Možete gniježdjevati elemente koji plutaju, a to može dovesti do plutajućeg mjesta na iznenadnom mjestu. Na primjer, ovaj plutati je lijevo plutao DIV unutar desnog plutao DIV.
• Plutajući elementi će sjediti jedno do drugog ako u spremniku ima mjesta. Na primjer, ovaj spremnik ima tri širine 100 px DIV elementi plutaju u spremniku širokog 400 piksela.

Čak možete koristiti plovake za izradu izgleda foto galerije. Stavljate svaku minijaturu (to najbolje radi kada su sve iste veličine) u DIV s naslovom i plutaju DIV elemenata u spremniku. Bez obzira koliko je prozor preglednika širok, sličice će se uskladiti ravnomjerno.

Isključivanje Float

Kada znate kako da biste dobili element koji pluta, važno je znati kako isključiti plovak. Isključite plovak pomoću jasnog entiteta CSS-a. Možete očistiti lijeve plovke, plutače ili oboje:

jasno: lijevo;jasno: pravo;jasno: oboje;

Bilo koji element koji postavite jasno svojstvo prikazat će se ispod elementa koji je plutao u tom smjeru. Na primjer, u ovom primjeru prva dva odlomka teksta nisu izbrisana, ali treći je.

Igrajte s jasnom vrijednosti različitih elemenata u svojim dokumentima da biste dobili različite izglede izgleda. Jedan od najzanimljivijih plutajućih izgleda jest niz slika dolje desno ili lijevo pored odlomaka teksta. Čak i ako tekst nije dovoljno dugo da se pomakne iznad slike, možete koristiti jasno na svim slikama kako biste bili sigurni da se pojavljuju u stupcu, a ne pored prethodne slike.

HTML (ponovite ovaj odlomak):

Duis aute irure dolor sed do neusmod tempor incididunt u reprehenderit u voluptate. Cupidatat nije proistekao, utjecao je i pažao.

CSS (za lijepljenje slika lijevo):

img.float {float: lijevo; jasna: lijevo; margin: 5px;}

I desno:

img.float {float: pravo; jasna: u pravu; margin: 5px;}

Upotreba Floata za izgled

Kad jednom shvatite kako plutati imovine, možete ga početi koristiti za postavljanje web stranica. Ovo su koraci koje poduzimam za izradu plutajuće web stranice:

• Izradite raspored (na papiru ili u grafičkom alatu ili u mojoj glavi).
• Odredite gdje će biti podjela stranice.
• Odredite širinu različitih spremnika i elemenata unutar njih.
• Pluta sve. Čak i najudaljeniji element spremnika lebdi lijevo tako da znam gdje će biti u odnosu na port preglednika.

Sve dok znate širine (postotci su u redu) vaših odjeljaka izgleda, možete upotrijebiti plutati imovine da ih stavi gdje pripadaju na stranicu. A lijepo je što ne morate brinuti o tome kako je model kutija različit za Internet Explorer ili Firefox.