Hordhac: Fiiq Fiiqan (Float)

Sifada float ee CSS waxay noo ogolaataa inaan dhinaca bidix ama midig ka fiiqno curiye, taasoo u sahlaysa qoraalka iyo curiyeyaasha kale inay ku wareegaan. Waxay si weyn loo isticmaalayay si loo abuuro qaab-dhismeedyo badan oo ka hor imaanaya hababka layout-ka casriga ah sida Flexbox iyo Grid.

Inkastoo loo isticmaali karo sawirro iyo qoraallo, float asal ahaan looguma talagalin layout-ka bogga oo dhan. Waxaa laga yaabaa inuu keeno arrimo sida curiyeyaasha waalidka oo aan si sax ah u balaarin si ay u daboolaan curiyeyaasha fiiqan.

Isticmaalka Aasaasiga ah ee Float

Si loo isticmaalo float, waxaad si fudud u dejinaysaa qiimaha float midkood left, right, ama none (caadi).

.fiiq-bidix { float: left; } .fiiq-midig { float: right; }

Tusaale HTML:

  
  
Qoraalkan wuxuu ku wareegayaa sawirka sababtoo ah sifada float.

Ka Saaridda Fiiq Fiiqan (Clearing Floats)

Sababtoo ah dabeecadda ka baxsan socodka ee curiyeyaasha fiiqan, waxaa laga yaabaa inaad u baahato inaad 'ka saarto' fiiq fiiqan si loo hubiyo in layout-kaagu uusan u dhaqmin si aan la filayn. Tan waxaa lagu samayn karaa iyadoo la isticmaalayo sifada clear.

.saar-bidix { clear: left; } .saar-midig { clear: right; } .saar-labada { clear: both; }

Habka ugu caansan ee loo saaro fiiq fiiqan waa iyadoo lagu daro curiye, sida <div>, oo leh clear: both; ka dib curiyeyaasha fiiqan ee ku jira waalidka.

  
Fiiq Bidix
  

Habka Micro Clearfix

Hab kale oo casri ah oo lagu saaro fiiq fiiqan waa iyadoo la isticmaalayo waxa loogu yeero 'clearfix hack'. Tan waxaa lagu sameeyaa iyadoo lagu daro CSS-ka soo socda waalidka:

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Kadib waxaad ku dari kartaa fasalka clearfix curiyaha waalidka:

  
Fiiq Bidix

Isticmaalka Casriga ah iyo Talooyin

Inkastoo float ay weli tahay mid waxtar leh xaaladaha qaarkood (sida qoraalka oo ku wareegaya sawir), Flexbox iyo Grid ayaa ah habab layout oo ka xoog badan oo ka sii macno badan oo casri ah. Isku day inaad u isticmaasho float si yar, adigoo doorbidaya Flexbox ama Grid layout-ka bogga oo dhan.

Talo: Had iyo jeer tixgeli sida float ay u saameyn karto curiyeyaasha kale ee ku jira boggaaga, oo isticmaal hababka saaridda fiiq fiiqan si looga hortago dhibaatooyinka layout ee aan la filayn.