Pagsabut sa CSS Float

Paggamit sa CSS float Property sa Pagdisenyo Web Page Layouts

Ang CSS nga kabtangan usa ka importante nga kabtangan alang sa layout. Gitugotan nimo nga ibutang ang imong disenyo sa panid sa web sama gayud sa imong gusto nga ipasundayag niini-apan aron gamiton kini imong masabtan kon giunsa kini nga buhat.

Sa usa ka style sheet, ang CSS float property susama niini:

.right {float: right; }

Kini nagsulti sa browser nga ang tanan nga adunay klase sa "matarung" kinahanglan nga lutaw sa tuo.

Imong itugyan kini nga sama niini:

class = "right" />

Unsay Mahimo Nimong Makalutaw sa CSS float Property?

Dili ka makalutaw sa matag elemento sa usa ka web page. Mahimo ka lamang nga molutaw sa mga elemento sa block-level . Kini ang mga elemento nga nagkuha sa usa ka block sa luna sa panid, sama sa mga larawan (), mga parapo (), mga dibisyon (), ug mga lista ().

Ang ubang mga elemento nga makaapekto sa teksto, apan dili maghimo og usa ka kahon sa panid ang gitawag nga mga inline nga mga elemento ug dili mahimong molutaw. Kini ang mga elemento nga sama sa span (), linya break (), kusgan nga paghatag gibug-aton (), o mga italics ().

Diin Sila Nanglutaw?

Mahimo nimo ang paglutaw sa mga elemento sa tuo o sa wala. Ang bisan unsa nga elemento nga nagsunod sa naglutaw nga elemento modagayday libut sa naglutaw nga elemento sa pikas nga bahin.

Pananglitan, kon molutaw ang usa ka imahen sa wala, ang bisan unsang teksto o ubang mga elemento nga nagsunod niini moagos palibot niini sa tuo. Ug kon molutaw ang usa ka hulagway sa tuo, ang bisan unsang teksto o uban pang mga elemento nga nagsunod niini moagos palibot niini sa wala. Ang usa ka imahen nga gibutang sa usa ka block sa teksto nga walay bisan unsang estilo sa float nga gigamit niini magpakita apan ang browser gibutang aron ipakita ang mga larawan.

Kini kasagaran sa unang linya sa mosunod nga teksto nga gipakita sa ubos sa hulagway.

Hangtod Kanus-a Kini?

Usa ka elemento nga naglutaw molihok hangtod sa wala o tuo sa elemento sa sudlanan kutob sa mahimo. Kini nagresulta sa pipila ka mga nagkalain-lain nga mga sitwasyon depende kung unsa ang gisulat sa imong code.

Kay kini nga mga ehemplo, ako maglutaw sa usa ka gamay nga elemento sa DIV sa wala:

Mahimo ka pa mogamit sa mga barko sa paghimo og layout sa photo gallery. Gihimo nimo ang matag thumbnail (kini labing maayo kung kini parehas ang gidak-on) sa DIV nga may caption ug ang float sa mga elemento sa DIV sa sudlanan.

Bisag unsa ka halapad ang bintana sa browser, ang mga gagmay nga mga thumbnail mag-uniporme.

Gisalikway ang Float

Sa higayon nga mahibal-an nimo kung unsaon pagkuha ang usa ka elemento nga molutaw, importante nga mahibal-an kon unsaon pagpatay sa float. Gisalikway nimo ang float gamit ang CSS nga tin-aw nga kabtangan. Mahimo nimong hawanon ang wala nga mga barko, ang mga sakayan o ang duha:

tin-aw: wala;
tin-aw: husto;
tin-aw: ang duha;

Ang bisan unsa nga elemento nga imong gitakda nga tin-aw nga kabtangan alang sa makita sa ubos sa usa ka elemento nga naglutaw nga direksyon. Pananglitan, sa niini nga panig-ingnan ang una nga duha ka mga parapo sa teksto wala gihawanan, apan ang ikatulo.

Pagdula uban sa tin-aw nga bili sa nagkalainlaing elemento sa imong mga dokumento aron makabaton og lainlaing mga epekto sa layout.

Ang usa sa labing makapaikag nga mga lut-od nga mga lut-od mao ang usa ka serye sa mga larawan sa tuo o wala nga kolum sunod sa mga parapo sa teksto. Bisan kon ang teksto dili igo aron sa pagsulat sa milabay nga larawan, mahimo nimo gamiton ang tin-aw sa tanan nga mga larawan aron masiguro nga kini makita sa kolum imbes sa sunod nga hulagway.

Ang HTML (balika kini nga parapo):


Duis aute irure dolor nga dili mahimo sa temporaryo nga panahon sa pagsupak sa pagsuway. Pag-uswag sa dili madugay, aron makahimo ka ug magamit nga magamit.

Ang CSS (aron molutaw ang mga hulagway sa wala):

img.float {float: left;
tin-aw: wala;
kilid: 5px;
}

Ug sa tuo:

img.float {float: right;
tin-aw: husto;
kilid: 5px;
}

Paggamit sa mga Lumulupyo alang sa Layout

Sa higayon nga imong masabtan kon giunsa nga molihok ang float property, mahimo nimo kini gamiton aron ibutang ang imong web pages. Mao kini ang mga lakang nga akong gihimo aron makahimo og usa ka floated web page:

Hangtud nga nahibal-an nimo ang mga gilapdon (mga porsyento maayo) sa imong mga seksiyon sa layout, mahimo nimo gamiton ang float property aron ibutang kini sa kung asa kini nahisakop sa panid. Ug ang maayo nga butang mao, dili ka angay mabalaka mahitungod sa modelo sa kahon nga lahi alang sa Internet Explorer o Firefox.