CSS Float: paghulagway, mga kabtangan

Float - usa sa mga nag-unang mga gimbuhaton sa pinulongan sa CSS (mga busay sa Style Sheets - formatting misulti). pinulongan Kini nga naglungtad sukad sa 1996 ug ang nagpadayon pa sa pag-ugmad. Sa higayon nga, developers ang gigamit sa ikatulo nga bersyon sa CSS. Uban sa CSS programming pinulongan nga kini mao ang posible nga sa paghimo sa usa ka matahum ug makapahimuot nga dapit nga dili makita karaan o dili komportable alang sa user sa, bisan kon ikaw wala mogamit sa JavaScript. Modernong mga posibilidad sa ikatulo nga bersyon sa permit.

Usab, mga developers makagamit mas sayon nga mga kapilian sa formatting, sama sa Flexbox o Posisyon sa pag-usab sa mga elemento sa luna sa site, apan una nga mga butang-una. Sa pagsugod sa pagsabut sa mga bentaha ug disbentaha Float kabtangan.

CSS Float - nganong kini gikinahanglan?

Float - kabtangan alang sa mga elemento positioning. Matag adlaw, kini mahimong makita diha sa mga panid sa mga mantalaan ug mga magasin, nagtan-aw sa mga hulagway ug sa mga teksto, nga mao ang kaayo neatly wraps kanila. и CSS при использовании функции Float должно произойти то же самое. Sa kalibutan sa HTML ug CSS code pinaagi sa paggamit sa Float function kinahanglan mahitabo sa mao usab nga. Apan kini mao ang bili sa paghinumdom nga ang larawan pag-edit dili kanunay mao ang nag-unang katuyoan sa niini nga function. kini mahimong gamiton sa paghimo sa mga popular nga nahimutangan sa mga elemento sa site sa duha, tulo, upat ka haligi. Sa pagkatinuod, Float CSS kabtangan ang gigamit sa halos sa bisan unsa nga HTML-elemento. Ang pagkahibalo sa mga sukaranan sa pag-edit sa mga elemento Layout sa paggamit sa Float function, ug dayon ang Property, sa paghimo sa bisan unsa nga disenyo sa site dili lisud.

Espesyal nga DTP mga programa usahay wala magtagad sa mga larawan, ug sa pag-adto sa ibabaw kanila. Igo na susama nga mga butang nga mahitabo, ug sa web design, uban lamang sa kahayag sa teksto, kay sa pagsaka sa hulagway nga gipakita (kon gigamit sayop Float kabtangan) sunod niini o sa ilalum niana, apan dili kanunay nga sa diin kamo kinahanglan nga sa usa ka Developer.

CSS Float paghulagway sa kabtangan

Sa pagkatinuod, ang katakos sa paggamit sa Float kabtangan mao ang usa ka maayo kaayo ace sa lungag alang sa bisan unsa nga web designer. Apan, Subo, ang kakulang sa pagsabut kon sa unsang paagi kini nga mga buhat mahimo nga modala ngadto sa magbanggaay ug uban pang mga elemento sa mga kasub-anan dapit sa niini nga matang. Sa sayo pa usab ingon nga mga sitwasyon mahitabo tungod sa bugs sa mga browsers. Karon ang tinago sa kon unsaon sa husto nga paagi sa paggamit sa Float kabtangan pagabuksan, ug walay mga problema uban niini dili kinahanglan nga mas dako.

Float kita kabtangan adunay upat ka mga mithi:

• Float: magapanunod;
• Float: matarung;
• Float: wala;
• Float: walay;

Kay sa mga tawo nga masayud sa Iningles, ang mga prinsipyo sukaranan Float kabtangan kinahanglan nga tin-aw. Apan alang sa mga tawo nga wala mahibalo, mahimo dad-on mo sa usa ka gamay nga katin-awan. Sukaranan: wala; Kini nagpalihok sa mga elemento sa lawas sa labing grabeng wala suok sa ginikanan nga elemento. Ang samang butang ang mahitabo (lamang ang uban nga mga paagi nga) sa dihang bcgjkmpjdfybb sukaranan: matarung; . Bili: magapanunod; nagmando sa elemento sa maghunahuna sa sama nga kontorno nga sama sa nga sa ginikanan. Ang maong mga elemento nga gitawag nga bata pa, ingon nga sila nahimutang direkta sa sulod sa ginikanan html-sa code. Usa ka kabtangan: walay; nagtugot kini sa elemento nga dili makadaot sa naandan nga dagan sa sa dokumento, nga gibutang pinaagi sa default alang sa tanang mga bahin sa code.

Unsa nga paagi sa Float buhat?

Float CSS kabtangan nagtrabaho na lamang. Ang tanan nga gihulagway sa ibabaw, mahimo nga walay dako nga kalisud. Human niana, ang tanan nga butang mahimo nga sama sa sayon. Apan sa wala pa ako magpadayon sa pagtuon Float kabtangan, nga nagkantidad sa usa ka gamay nga tan-aw ngadto sa teoriya. Ang matag web site mao ang usa ka elemento sa block. Kini mao ang sayon sa pagtan-aw niini pinaagi sa pag-abli sa console sa Google Chrome pinaagi sa dinalian Ctrl + pagbalhin + J. teksto, titulo, larawan, sumpay, ug sa tanan nga uban pang mga sangkap sa mga site nga gipakita bloke, lang sa lain-laing gidak-on. Sa sinugdan, kining tanan nga mga bloke nagsunod sa usag usa. Ingon sa gipakita sa panig-ingnan sa ubos, ang code hilo moadto sa usa ka human sa usa, ug sa ingon makita nila nga hugot ang usa sa luyo sa usa.

Kini mao ang gitawag nga usa ka normal nga dagan (normal nga dagan). Sa diha nga ang tanan nga sa maong mga bloke mahulog sa sulod sa usag usa (sa lawas nga walay pagtabok elemento) vertically. Sa sinugdan, ang tanan nga ang mga sulod sa mga panid sa web nga nahimutang sa niini nga paagi. Apan, sa diha nga ang paggamit sa, alang sa panig-ingnan, ang mga kabtangan sa CSS Float Wala pinulongan elemento dahon sa iyang natural nga posisyon sa mga nagalihok pahina ug sa wala. kinaiya Kini modala ngadto sa sa mga dili kalikayan banggaay uban sa mga elemento nga nagpabilin sa normal nga dalan.

Sa laing mga pulong, ang mga elemento nga sa baylo posisyon sa vertically, mga tapad sa usag usa karon. Kon ang ginikanan nga elemento mao ang igo nga luna aron nga kini accommodate sa duha ka mga anak sa sulod, sa banggaay wala mahitabo, apan kon dili, ang pagpahamtang sa usa ka butang ngadto sa lain mao ang dili kalikayan. Kini mao ang hilabihan ka importante nga hinumduman alang sa pagsabut sa mga kabtangan sa Float CSS.

Tin-aw nga function sa pagsulbad sa mga problema

Float Kita nagpakita sa usa ka kasingkasing nga sa matag - Tin-aw. Mag-uban sila - dili man pagpabanaw sa tubig. Duha niini nga mga bahin sa usag usa ug sa paghimo sa Developer malipayon. Sumala sa gihisgotan sa ibabaw, kasikbit nga mga selula gikan sa ilang normal nga dalan ug usab mosugod sa "float" ingon nga ang mga elemento nga sa Float kabtangan gigamit (alang sa panig-ingnan, CSS Float Top). Ingon sa usa ka resulta, sa baylo nga sa usa ka naglutaw nga elemento gets duha ka, ug dili sa dapit diin sila gituyo sa pag-arrange sa mga developer. Gikan sa higayon nga nagsugod pa lang sa tanan nga mga problema.

Sa Tin-aw function adunay lima ka mga prinsipyo:

• : Wala;
• : Tuo;
• : Ang duha;
• : Makapanunod;
• walay;

Pinaagi sa pagtandi kita makasabut sa diha nga kini mao ang labing maayo sa paggamit sa mga Tin-aw function. Kon kita gisulat sa usa ka linya sa code Float: matarung; (CSS-code ang gipasabot), ang function kinahanglan Tin-aw: sa tuo ;. Ang sama nga mga kabtangan sa mga bato ug Float: sa wala; kini katimbang Tin-aw: sa wala; . Sa diha nga ang pagsulat code Tin-aw nga: ang duha; kini turns nga ang elemento nga kini gigamit, kini nga bahin mahimong ubos sa mga elemento nga apply Float function. Makapanunod sa nagkinahanglan setting gikan sa ginikanan elemento, apan walay bisan kinsa nga dili sa paghimo sa bisan unsa nga mga kausaban sa estraktura sa site. и CSS Float-код, который сделает ваш веб-сайт единственным в своем роде. Kon kamo makasabut sa unsang paagi ang Float ug Tin-aw nga gimbuhaton, nga imong mahimo sa pagsulat sa usa ka talagsaon ug talagsaon nga HTML ug ang CSS Float-code, nga sa paghimo sa imong website talagsaon sa iyang matang.

Pinaagi sa paggamit sa Float sa paghimo sa mga haligi

Float ilabi mapuslanon nga bahin sa dihang pagmugna haligi sa dapit (o sa nahimutangan sa mga sulod CSS Float sa sentro sa panid sa web). Kini mao ang kini nga code mao ang labing praktikal ug sayon, busa kamo kinahanglan nga tagdon ang pipila ka mga kapilian alang sa pagmugna sa naandan nga template site nga naglangkob sa duha ka mga kolum. Pananglitan, sa usa ka sumbanan nga website sa sulod sa wala tabok-tabok bar (tabok-tabok bar) sa tuo, header ug footer. code ang motan-aw sama niini:

Karon atong gikinahanglan sa pagsabut kon unsa ang nahisulat dinhi. Ang ginikanan elemento diin ang nag-unang bahin sa html-code gitawag sa usa ka sudlanan (container). kini nagtugot kaninyo sa pagpugong sa mga elemento, nga gipadapat Float function sa pagkatag sa lain-laing mga direksyon. Kon kini dili, nan kini nga mga elemento ang gipalutaw sa mga utlanan sa browser.

Dayon, sa code ug moadto #content #navigation. Kini nga mga mga elemento gigamit Float function. #content gipadala sa wala ug sa tuo mao ang #navigation. Kini mao ang gikinahanglan aron sa paghimo sa usa ka site sa duha ka mga kolum. Siguroha nga hingalan sa gilapdon, sa pagkaagi nga ang mga butang dili sapaw sa usag usa. Ikaw mahimo hingalan sa gilapdon ug porsyento. Busa bisan mas komportable pa kay sa pixels. Pananglitan, 45% ngadto sa 45% ug #content alang sa #navigation, ug ang nahibiling 10% sa paghatag kabtangan margin.

Property sa Tin-aw, nga anaa sa #footer, wala mosunod sa footer #navigation ug #content, apan mga dahon niini ngadto sa mao gihapon nga dapit diin didto siya. Unsa ang mahimo sa mahitabo? Kon kamo dili hingalan Tin-aw nga mga kabtangan? Sa niini nga code #footer lamang moadto ug mahimong ubos sa #navigation. Kini mahitabo tungod sa kamatuoran nga #navigation igo nga luna sa accommodate labaw pa kay sa usa ka elemento. Sa niini nga masambingayong nga panig-ingnan nga kini mao ang tin-aw nga makita kon sa unsang paagi ang mga kabtangan sa Clear Float ug sa usag usa.

Mga kagul-anan mahimo mo maatubang sa diha nga pagsulat code

Ang mga ehemplo sa ibabaw ang mga yano. Apan uban kanila hinungdan sa mga problema. Kasagaran, sa pagkatinuod, sa usa ka daghan sa mga wala damha nga kasamok mahitabo sa Float function. Bisan unsa nga lain, apan ang mga problema sa kasagaran dili mahitabo sa CSS, ug sa usa ka HTML-code. Ang dapit diin ang elemento sa Float function sa usa ka HTML-code direkta makaapekto sa katapusan nga buhat. Aron sa paglikay sa mga nagkalain-laing matang sa mga kalisdanan, kini mao ang labing maayo sa pagsunod sa yano nga mga lagda - positioning elemento Float function sa unang code. Hapit sa kanunay kini nga mga buhat ug sa pagpamenos sa ilang wala damha nga kinaiya.

panagsangka sa mga elemento

Banggaay mahitabo sa diha nga ang ginikanan elemento naglakip sa daghang mga bata dili accommodate kanila sa tanan, ug sapaw sila sa usag usa. Kini bisan pa mahitabo nga ang mga butang dili mahimo nga makita, ug mawala gikan sa site. Kini mao ang dili usa ka bug browser, ug kini gilauman ug husto nga kinaiya sa mga elemento sa Float function.

Tungod sa kamatuoran nga kini nga mga mga elemento mao sa sinugdan sa normal nga dalan, ug dayon kini mabungkag Float kabtangan browser mahimo sa pagpapahawa kanila gikan sa site. Apan sa pagbuhat sa dili pagkawalay paglaum, tungod kay ang solusyon mao ang yano ug tin-aw - sa paggamit sa Cear kabtangan. Kini mao ang mahimo nga ang tanan nga mga paagi nga gikan sa niini nga problema, ang paggamit sa Tin-aw mao ang labing epektibo.

Apan ang problema sa sa banggaay sa mga elemento sa web panid mahimong masulbad sa laing paagi. Adunay labing menos duha ka mga paagi:

• Posisyon sa paggamit sa function;
• aplikasyon Flexbox.

Posisyon function mao ang kanunay nga ang usa ka maayo nga alternatibo sa CSS Float. Sa sentro sa panid sa web sa kaso sa posisyon aplikasyon mao ang labing maayo sa posisyon sa larawan. Kon husto apply mga hiyas: hingpit ug: paryente, ang mga elemento mahulog ngadto sa dapit, ug dili sapaw sa usag usa.

Posisyon Analysis ug Float function code

и CSS Float заменить на Position. Kini kinahanglan atubang sa dugang nga uban sa mga dalan sa HTML ug CSS Float gipulihan sa posisyon. Sa pagkatinuod kini kaayo mga walay-pagtagad. Ang ni-ingon nga adunay usa ka elemento #container ug #div.

#container {

gilapdon: 40%;

float: wala;

margin: 10px;

}

#div {

gilapdon: 40%;

float: tuo;

margin: 10px;

}

#footer {

tin-aw: ang duha;

}

Sa panig-ingnan niini nga, sa paggamit sa mga gimbuhaton sa ikaduha nga sudlanan (CSS div) Float makatabang sa paghimo sa usa ka sumbanan nga dapit sa duha ka mga kolum. Ayaw gayod kalimti ang Tin-aw function. Kon wala kini lamang upan elemento sa ibabaw sa matag usa.

Busa sa unsang paagi ikaw usab sa mga CSS ug Float code sa paggamit sa Postion? Kaayo yano:

#container {

gilapdon: 40%;

posisyon: paryente;

margin: 10px;

}

#div {

gilapdon: 40%;

posisyon: paryente;

margin: 10px;

}

Sa niini nga kaso #container #div ug sa pagkuha sa gikinahanglan nga posisyon sa developer sa ginikanan nga elemento. Ang nag-unang nga butang? ibutang #div ug #container usa ka ginikanan nga elemento, nga katumbas sa ilang gidak-on.

Flexbox - kini nga function mopuli CSS Float?

Flexbox - ang labing abante nga paagi sa paghimo sa website sa higayon, mao nga kini nga function dili gisuportahan sa mas magulang nga mga bersyon sa browser. Kini nga kamatuoran dili diskwento, alang sa mga tiggamit sa mas magulang nga mga bersyon sa browser dili makahimo sa pagtan-aw sa mga husto nga bersyon sa site.

Flexbox dili usa ka kabtangan, ingon sa usa ka linain nga module. Busa flexbox nagsuporta sa usa ka gidaghanon sa mga kabtangan, nga pagtrabaho lamang uban kaniya. Gawas pa, display function, nga adunay tulo ka lantugi inline, block ug inline-block sa flexbox adunay usa lamang ka Flex-dagan.

Sa unsang paagi Flexbox?

Kini nga teknolohiya makatabang sa developer sa dali abin elemento horizontally ug vertically. Flexbox mahimo usab-usab sa direksyon ug sa han-ay sa mga elemento display. Sa niini nga teknolohiya, adunay duha ka wasay: Main axis ug Krus axis, sa tibuok nga ang tibuok Flexbox gitukod. Kini usab nga magabalhin sa mga epekto Float ug Tin-aw nga gimbuhaton. Siya magatukod sa iyang sistema sa code, nga gigamit sa usa ka talagsaon sa iyang kabtangan, sa ingon, Subo, dili makahimo sa pagkopya sa sa mga selula sa ubang mga kabtangan, sama sa Float ug Baroganan. Ug kana mahimo nga kaayo handy, tungod kay, sama sa gihisgotan sa ibabaw, Flexbox lamang sa pagbuhat sa mas bag-o nga mga bersyon sa browser.

Kini mao ang bili sa paghinumdom nga sa katapusan posisyon, Flexbox Float ug sa pagbuhat sa samang butang - sa paghimo sa usa ka talagsaon ug orihinal nga desinyo sa imong site. Ang matag bersyon sa gihisgotan sa artikulo nagabuhat niini sa iyang kaugalingon nga paagi ug, busa, adunay duha bentaha ug disbentaha. Dugang pa, kini mahitabo nga dapit hingpit nga Float function (alang sa panig-ingnan, sa dapit sa usa ka yano nga gambalay), apan dapit mas maayo nga gamiton ang posisyon o Flexbox.

Double sa Kilid Bug

Apan, usahay, Subo, ang matag problema sa developer motungha dili gikan sa mga sinulat nga kalagdaan, uban sa bugs ug sa pipila ka browser piho nga porma. Pananglitan, sa Internet Explorer, adunay usa ka bug, nga mao ang gitawag nga double sa Kilid Bug. Siya nagasapnay sa mga Kilid sukaranan sa duha ka, nga miresulta sa pagbakwit sa mga elemento sa dapit sa utlanan browser. Aron sa paglikay sa niini, kini mao ang igo sa nagpakita sa sukaranan sa Kilid Percentage. Kasagaran kini nga bug mahitabo sa diha nga ang bili sa y ug kabtangan sa Kilid Float punto.

#div {

float: wala;

margin-wala: 10px;

}

code Kini ipasa ang elemento sa Internet Explorer 20 px wala. Ikaw mahimo usab sa code sama sa mosunod:

#div {

float: wala;

margin-sa wala: 10%;

}

o sa ingon

#div {

float: wala;

margin-tuo: 10px;

}

Duha niini nga mga mga kapilian makasulbad sa problema sa mga elemento pagbakwit.

Bugs browser ug sayop nga display site

Kini mao ang bili sa paghinumdom nga ang Internet Explorer - dili lamang ang browser nga mahitabo bugs. Tigulang nga mga bersyon sa Google Chrome ug Mozilla usab sayop ipakita ang pipila ka mga elemento sa modernong mga website. Kay ang matag usa niini nga mga ayo, imong makaplagan ang usa ka solusyon. Sa kinatibuk-an, atong mamatikdan nga ang paggamit sa Float ang paghimo sa usa ka orihinal ug madanihon design website. Pagsabut sa mga sukaranan ug mga baruganan sa kabtangan niini nga makatabang sa paglikay sa mga sayop ug sa paghimo sa kinabuhi nga mas sayon alang sa bisan unsa Developer.