Ang ari-arian ng CSS ay isang napakahalagang ari-arian para sa layout. Pinapayagan ka nitong ilagay ang iyong mga disenyo ng web page nang eksakto kung nais mong ipakita ang mga ito-ngunit upang magamit ito kailangan mong maunawaan kung paano ito gumagana.
Sa isang style sheet, ang CSS float property ay ganito ang hitsura nito:
.right {float: right; }
Sinasabi nito sa browser na ang lahat ng may klase ng "kanan" ay dapat na lumutang sa kanan.
Gusto mong italaga ito tulad nito:
class = "right" />
Ano ang Maaari mong Lumutang sa Property Float ng CSS?
Hindi mo maaaring lumutang ang bawat elemento sa isang web page. Maaari ka lamang lumutang ang mga elemento ng block-level. Ito ang mga elemento na kumukuha ng isang bloke ng puwang sa pahina, tulad ng mga larawan (), mga talata (), dibisyon (), at mga listahan ().
Ang iba pang mga elemento na nakakaapekto sa teksto, ngunit hindi lumikha ng isang kahon sa pahina ay tinatawag na mga elemento ng inline at hindi maaaring floated. Ang mga ito ay mga elemento tulad ng span (), linya ng break (), malakas na diin (), o mga italics ().
Saan Sila Lumulutang?
Maaari kang magpalutang ng mga elemento sa kanan o sa kaliwa. Ang anumang elemento na sumusunod sa floated elemento ay dumadaloy sa paligid ng floated elemento sa kabilang panig.
Halimbawa, kung lumutang ang isang imahe sa kaliwa, ang anumang teksto o iba pang mga elemento na sumusunod dito ay dumadaloy sa paligid nito sa kanan. At kung lumutang ang isang imahe sa kanan, anumang teksto o iba pang mga elemento na sumusunod dito ay dumadaloy sa paligid nito sa kaliwa. Ang isang imahe na inilagay sa isang bloke ng teksto nang walang anumang estilo ng float na inilalapat dito ay ipapakita gayunpaman ang browser ay nakatakda upang magpakita ng mga imahe. Ito ay karaniwang sa unang linya ng sumusunod na teksto na ipinapakita sa ibaba ng imahe.
Gaano kalayo ang Ilalabas Nila?
Isang elemento na na-floated ay lilipat sa kaliwa o kanan ng elemento ng lalagyan gaya ng makakaya nito. Nagreresulta ito sa iba't ibang sitwasyon depende sa kung paano isinulat ang iyong code. Para sa mga halimbawang ito, ako ay lumulutang isang maliit DIV elemento sa kaliwa:
- Kung ang floated element ay walang pre-natukoy na lapad, ito ay kukuha ng mas maraming puwang na pahalang gaya ng kinakailangan at magagamit, anuman ang float. Tandaan: sinisikap ng ilang browser na maglagay ng mga elemento sa tabi ng mga elemento ng floated kapag ang lapad ay hindi tinukoy-karaniwan ay nagbibigay lamang ng di-floated na elemento lamang ng isang maliit na halaga ng espasyo. Kaya dapat mo laging tukuyin ang isang lapad sa mga floated elemento.
- Kung ang elementong lalagyan ay ang elemento ng HTML, ang floated
DIVay umupo sa kaliwang gilid ng pahina. - Kung ang elemento ng lalagyan ay mismo ay naglalaman ng ibang bagay, ang floated
DIVay umupo sa kaliwang gilid ng lalagyan. - Maaari mong pugad ang mga elemento na lumutang, at maaaring magresulta sa float na nagtatapos sa isang nakakagulat na lugar. Halimbawa, ang float na ito ay isang kaliwa na lumulutang
DIVsa loob ng isang karapatan floatedDIV. - Ang mga elemento ng yumuko ay umupo sa tabi ng isa't isa kung may silid sa lalagyan. Halimbawa, ang lalagyan na ito ay may tatlong lapad na 100px
DIVAng mga elemento ay lumutang sa isang malawak na lalagyan na 400px.
Maaari mo ring gamitin ang mga kamay upang lumikha ng isang layout ng gallery ng larawan. Inilagay mo ang bawat thumbnail (ito ay pinakamahusay na gumagana kapag ang mga ito ay ang parehong laki) sa isang DIV kasama ang caption at ang float ang DIV mga elemento sa lalagyan. Hindi mahalaga kung gaano kalawak ang window ng browser, ang mga thumbnail ay mag-line up nang pantay.
Pag-off ang Float
Kapag alam mo kung paano makakuha ng isang elemento upang lumutang, mahalagang malaman kung paano patayin ang float. Pinapatay mo ang float gamit ang CSS clear property. Maaari mong i-clear ang mga natitirang kamay, tamang mga kamay o pareho:
malinaw: kaliwa;malinaw: tama;malinaw: parehong;
Anumang elemento na itinakda mo ang malinaw na ari-arian para sa ay lilitaw sa ibaba ng isang elemento na lumulutang na direksyon. Halimbawa, sa halimbawang ito ang unang dalawang talata ng teksto ay hindi naalis, ngunit ang ikatlo ay.
Maglaro ng malinaw na halaga ng iba't ibang mga elemento sa iyong mga dokumento upang makakuha ng iba't ibang mga epekto sa layout. Ang isa sa mga pinaka-kawili-wiling floated layout ay isang serye ng mga imahe pababa sa kanan o kaliwang haligi sa tabi ng mga talata ng teksto. Kahit na ang teksto ay hindi sapat na mahaba upang mag-scroll sa nakaraang larawan, maaari mong gamitin ang malinaw sa lahat ng mga larawan upang matiyak na lumilitaw ang mga ito sa haligi sa halip na sa susunod na larawan.
Ang HTML (ulitin ang talata na ito):
Duis aute irure dolor sed the doodle tempor incantidunt in reprehenderit in voluptate. Huwag mag-isip ng isang bagay, upang makagawa ng isang mahusay na mag-aaral.
Ang CSS (upang lumutang ang mga imahe sa kaliwa):
img.float {float: left; malinaw: kaliwa; margin: 5px;}
At sa kanan:
img.float {float: right; malinaw: tama; margin: 5px;}
Paggamit ng mga Float para sa Layout
Kapag naiintindihan mo kung paano lumutang gumagana ang ari-arian, maaari mong simulan ang paggamit nito upang ilatag ang iyong mga web page. Ito ang mga hakbang na ginagawa ko upang lumikha ng isang floated web page:
- Idisenyo ang layout (sa papel o sa isang tool sa graphics o sa aking ulo).
- Tukuyin kung saan pupunta ang mga dibisyon ng pahina.
- Tukuyin ang lapad ng iba't ibang mga lalagyan at ang mga elemento sa loob nito.
- Float everything. Kahit na ang pinakamalawak na elemento ng lalagyan ay lumulutang sa kaliwa upang malaman ko kung saan ito ay may kaugnayan sa port ng view ng browser.
Hangga't alam mo ang mga lapad (ang mga porsyento ay pinong) ng iyong mga seksyon ng layout, maaari mong gamitin ang lumutang ari-arian upang ilagay ang mga ito kung saan sila nabibilang sa pahina. At ang ganda ng bagay ay, hindi mo kailangang mag-alala ng mas maraming tungkol sa modelo ng kahon na naiiba para sa Internet Explorer o Firefox.
