CSS Float: deskribapena, ezaugarriak

Float - Hizkuntzaren oinarrizko funtzio bat CSS (estilo-orriak Kaskadako dira - formatuaren Kaskadako). Hizkuntza hau 1996tik existitu eta oraindik garatzen jarraitu. Momentuz, sustatzaile hirugarren CSS bertsioa erabili dute. CSS programazio hizkuntza posible da gune eder eta atsegina izango dela ez agertzea zaharkitu edo deseroso erabiltzailearentzat, nahiz eta ez zuen Javascript erabili sortzeko. Hirugarren baimena bertsio aukerak modernoa.

Era berean, sustatzaile erosoagoa formatu-aukerak, hala nola Flexbox edo posizioa gunean espazioa elementu aldatzeko gisa, baina lehenengo gauza lehenengo erabil daiteke. abantailak eta desabantailak Float propietate ulertzen hasteko.

CSS Float - zergatik behar da?

Float - Jabetza kokatzea elementu da. Egunero, egunkariak eta aldizkariak orrietan ikus daiteke, argazkiak eta testua, oso txukun haiek biltzen inguruan begira. и CSS при использовании функции Float должно произойти то же самое. HTML eta CSS kodea munduan Float funtzioa erabilita bera gertatu behar dituen ere. Baina merezi duten irudi edizio hau ez da beti funtzio honen helburu nagusia gogoratzeko da. Erabili ahal izango da gunearen elementuen kokapena ezagun sortzeko bi, hiru, lau zutabe batean. Izan ere, Float CSS jabetza ia edozein html-elementu erabiltzen da. diseinua elementu Jabetza editatzen Float funtzioa erabiliz, eta, ondoren, inolako gunearen diseinua sortzeko oinarriak ezagutzea ez da zaila.

DTP programa bereziak batzuetan ez ikusi ahal irudiak, eta horiek baino gehiago joan. Larreina antzeko gauzak gertatzen eta web diseinua, testu argia bakarrik, baizik Igoera irudiaren gainean bistaratzen da (erabiltzen gaizki Float propietate bada) ondoan edo azpian, baina ez beti non sustatzailearen bat behar duzu.

CSS Float jabetza azalpena

Izan ere, Float jabetza erabiltzeko gaitasuna edozein web diseinatzaile zuloa batekoa oso ona da. Baina, zoritxarrez, hau nola funtzionatzen duen ulertzeko eza daiteke talkak eta beste gune mota honetako penak elementu eramaten. Lehenago ere egin egoerak hala gertatzen nabigatzaile bitxiak dituelako. Orain nola behar bezala erabiltzeko Float jabetza sekretua irekiko da, eta horrekin batera, arazorik ez da izan behar handiagoa.

Jabetza lau balio du Float dugu:

• Float: hereta
• Float: eskuinera;
• Float: ezker;
• Float: none;

Badakizu nor English dituztenentzat, parametro balioak Float jabetza argi izan behar du. Baina ezagutzen ez dutenentzat, azalpen txiki bat ekarri ahal izango duzu. Parametroa: ezker; elementu gorputza mugitzen da muturreko ezker guraso elementua izkinan. Gauza bera gertatzen da (beste modu bakarra) denean parametro bcgjkmpjdfybb: eskuinera; . Balioa: hereta elementua konfigurazio bera gurasoaren bezala bereganatzeko agindua. Horrelako elementu izeneko umea oraindik, dira zuzenean kokatzen dira guraso html-in kodearen barruan eta. Jabetza A: none; elementua ez da ohiko dokumentu, hau da lehenetsiz ezartzen kodearen zati guztietarako fluxua eten ematen du.

Nola lan flotatzen?

Float CSS jabetza nahiko besterik gabe. Guztiak gainetik duela deskribatu da, beharreko zailtasun handirik gabe egin daiteke. Horren ondoren, dena bezain erraza izango da. Baina Float propietate ikasten jarraitzen dut aurretik, itxura apur bat teoria sartu merezi. Web gune bakoitza blokea elementu bat da. Erraza da hau ikusteko Google Chrome kontsola ireki CTRL-Shift + J. testua, izenburua, irudi, loturak, eta beste gunean osagai guztiak blokeak, besterik gabe, hainbat tamainak agertuko dira. Hasieran, bloke horiek guztiak elkarri jarraituz. adibidez beheko ikusten den bezala, kode katea joan bata bestearen atzetik, eta, beraz, zorrozki bestearen atzetik inork izan agertzen dira.

Hau fluxua normal bat (fluxua normal) deritzo. Noiz esaterako bloke guztiak elkarrengandik barruan erori bertikalean (gorputza elementu zeharkatu gabe). Hasieran, modu horretan kokatutako web orrietan eduki guztiak. Hala ere, erabiltzen, adibidez, CSS propietate Float Ezker hizkuntza elementu bere orrialdean eta mugimendu ezkerrera posizio naturala uzten. jokabide honek ikastaro normal geratu elementu horiekin saihestezina talka dakar.

Bestela esanda, elementu ordez kokatu bertikalean, elkarren ondoan daude orain. Guraso elementua nahikoa leku badago, beraz, bi seme-barrutik egonaldi hura, talka ez da gertatzen, baina ez bada, objektu bat inposaketa bestera, nahitaez. oso garrantzitsua da Float CSS propietateak ulertzeko gogoratzen.

Garbitu funtzioa arazoak konpontzeko

Float dugu bihotz bakoitzeko ezaugarriek - Garbitu. Guztion dira - ez ur isuri. Ezaugarri horiek biak elkarren osagarri eta sustatzailearen zoriontsu egin. Esan bezala, aldameneko zelula euren ikastaro normal joan eta, gainera, "karroza" elementua zein Float jabetza erabili zen (adibidez, CSS Float Top) gisa hasi. Ondorioz, elementu mugikorreko ordez lortzen bi, eta ez lekura sustatzailearen antolatzeko asmoa dute ere. Une horretatik aurrera, besterik ez da arazo guztiak hasita.

Garbitu berean funtzioa bost balioak ditu:

• : Ezker;
• : Eskuin;
• : Biak;
• : Hereta
• none;

Analogiaz ulertu ahal izango dugu denean hobe da Garbitu funtzioa erabiltzeko. dugun kodea Float lerro bat idatzi dute bada: eskuinera; (CSS-kode ekarri), funtzioa argi izan behar ditu: eskuin ;. harriak eta propietate bera flotatzen: ezkerrera Garbitu osagarri izango da: ezker; . kodea Garbitu idazten Noiz: bai; bihurtzen da elementu hori zein aplikatuko da, ezaugarri hori izango zein aplikatzen Float funtzioa elementu azpitik egon. Heretatzen ezarpenak hartzen guraso elementu batetik, baina ez ez du gunearen egitura edozein aldaketa egiteko. и CSS Float-код, который сделает ваш веб-сайт единственным в своем роде. nola Float eta Garbitu funtzioak, HTML berezia eta ezohikoa bat eta CSS Float-kodea, eta zure webgunean bere mota bakarra egingo idatzi ahal izango duzu ulertzen baduzu.

Float erabiltzea zutabeak sortzeko aukera

Float Ezaugarri oso erabilgarria denean gunean (edo CSS Float edukiaren kokalekua web orriaren erdian) zutabe sortzeko. Kode hau da gehien praktiko eta erosoa da, beraz, ohiko gune template bi zutabe osatua sortzeko hainbat aukera kontuan hartu behar duzu. Adibidez, har estandarra webgune bat eduki ezkerreko nabigazio-barra (nabigazio bar) an eskuineko, goiburua eta orri-oina batera. Kodea itxura hau du:

Orain zer jartzen duen hemen ulertu behar dugu. Guraso elementua bertan itsatsi kode zati nagusia deritzo a edukiontzi (edukiontzi). elementu, zein aplikatzen den mugikorra funtzioa norabide ezberdinetan sakabanatu saihesteko aukera ematen du. Ez zen bada, orduan elementu horiek flotatzen dute nabigatzaileak mugak dira.

Ondoren, kodea eta joan #content #navigation. Elementu horiek erabiltzen dira Float funtzioa. ezkerrera eta eskuinera bidaliko #content #navigation da. Beharrezkoa da, gune bat sortzeko bi zutabe batekin. Ziurtatu zabalera zehazteko, beraz, objektuak ez bata bestearen gainean elkar. zabalera eta portzentaje zehatz dezakezu. Beraz, nahiz eta erosoago pixel baino. Adibidez,% 45 eta #navigation for #content, eta gainerako% 10 eta% 45 jabetza marjina emateko.

Garbitu, eta horrek #footer dago, jabetza ez duela jarraitu footer #navigation eta #content, baina uzten leku berean izan zen. Zer gerta daiteke? Ez baduzu, zehaztu Garbitu jabetza? kodea #footer honetan, besterik gabe igo eta egingo #navigation pean. Gertatzen Izan ere, nahikoa leku #navigation elementu bat baino gehiago egokitzeko. ilustratzailea Adibide honetan argi eta garbi ikusgai dago argi propietate nola Float eta elkarren osagarri.

Baliteke arazoak kodea idatziz topo

Goiko adibide sinpleak dira. Baina haiekin arazoak sor ditzake. Oro har, izan ere, ustekabeko arazoak asko funtzioa Float gertatuko. Ez dio axola nola arraroa, baina arazo normalean ez CSS batera gertatzen dira, eta html-kode bat. non mugikorra funtzioa elementua itsatsi-kode bat zuzenean azken lanak eragiten die. Ordena hainbat zailtasun mota saihesteko, hobe da arau sinple makila - kokatzea elementu Float lehen kodearen funtzioa. Ia beti lan egiten du eta bere ustekabeko portaera gutxitzeko.

elementuen arteko talka

Talka gertatzen guraso elementua ume bat baino gehiago dauka denean ezin egokitzeko denak, eta elkarri gainjartzen dira. are gertatzen da elementu agian ez da agertzen, eta gune da desagertzen. Hau ez da akatsen nabigatzaile bat da, eta espero da eta mugikorra funtzioa elementuen portaera egokia.

Izan ere, elementu horiek hasiera batean ikastaro normal batean, eta, ondoren, hautsi egiten da Float jabetza nabigatzaileak ezabatzea daiteke gunetik ondorioz. Baina ez etsi, irtenbide erraza eta argia dagoelako - erabili Cear jabetza. Posible da arazo honen out modu guztiak, Garbitu erabilera eraginkorrena da.

Baina web orri elementuen talka arazoa beste modu batean konpondu daiteke. Badira gutxienez bi modu:

• Jarri funtzioa erabiltzea;
• Aplikazio Flexbox.

Kargua funtzioa CSS Float alternatiba ona izaten da. web orriaren erdian aplikazio Kargua kasuan da onena irudian kokatzeko. absolutuak eta: behar bezala aplikatu balioak bada erlatiboa, elementu leku erori, eta ez beste bakoitza bata bestearen gainean.

Kargua analisia eta mugikorra funtzioa kodea

и CSS Float заменить на Position. gehiago landu behar da HTML bidea eta CSS Float ordezkatu posizioa arabera. Izan ere, oso erraza da. Demagun ez elementu #container bat eta #div da.

#container {

zabalera:% 40;

flotatzen: ezker;

marjina: 10px;

}

#div {

zabalera:% 40;

flotatzen: eskuinera;

marjina: 10px;

}

#footer {

Argi: bai;

}

Adibide honetan, funtzio erabilera bigarren edukiontzi (CSS Div) Float bi zutabe gune estandar bat sortzeko lagunduko du. Inoiz ez ahaztu Garbitu funtzioa. Gabe bakarrik izango da, bata bestearen gainean elementu gainjarri.

Beraz, nola ez CSS aldatzen baduzu eta Float kodea postion erabili? Oso erraza da:

#container {

zabalera:% 40;

posizioa: erlatiboa;

marjina: 10px;

}

#div {

zabalera:% 40;

posizioa: erlatiboa;

marjina: 10px;

}

Hau horrela #container #div eta hartu behar diren guraso elementua ere sustatzailearen posizioa. Gauza nagusia? jarri #div eta guraso elementu bat, hau da, bere tamaina dagozkien #container.

Flexbox - Funtzio honek CSS Float ordezkatuko du?

Flexbox - une webguneak sortzeko modu aurreratuenak, beraz, funtzio hau ez da nabigatzaile bertsio zaharragoak onartzen. Izan ere, hau ez da kenduz, erabiltzaileen nabigatzaile bertsio zaharrago batera ezin izango gunearen bertsio zuzena ikusteko gai izango.

Flexbox ez da jabetza bat, beste modulu gisa. Beraz flexbox propietate, bakarrik berarekin lan horren kopuru bat onartzen du. Gainera, pantaila funtzioa, hiru parametro lerroko ditu, bloke eta inline-bloke flexbox ere han flex-fluxuaren bakarra dago.

Nola ez Flexbox?

Teknologia honek sustatzailearen erraz lerrokatu elementu horizontalki eta bertikalki laguntzen. Flexbox halaber norabidea eta pantailako elementuen ordena alda dezake. ardatz nagusia eta Gurutze ardatz, eta horren inguruan Flexbox osoan eraiki: teknologia honetan, bi ardatz daude. Halaber, efektu Float eta Garbitu funtzioak kentzen ditu. bere sistema eraikitzen zituen kodea, eta hori berezia erabiltzen du bere jabetza den eta, beraz, zoritxarrez, ezin izango du zeluletan errepikatzeko gai beste propietate, hala nola, mugikorra eta Kokapena eta. Eta oso erabilgarria izango litzateke, izan ere, esan bezala, Flexbox bakarrik nabigatzaile bertsio berriagoak lan egiteko.

merezi hori gogoratzeko the end Kargua, Flexbox Float eta gauza bera egin da - zure gunearen diseinu bitxi eta original bat sortzeko. bertsio bakoitzak artikuluan eztabaidatu egiten du bere erara, eta ondorioz, bi abantailak eta desabantailak ditu. Gainera, nonbait perfektua Float funtzioa (adibidez, egitura soil batekin gunean), baina nonbait hobeto posizioa edo Flexbox erabili gertatzen da.

Binakako marjina Bug

Hala ere, batzuetan, zoritxarrez, sustatzailearen arazo guztietan, ez sortzen idatzizko kodigoa, bugs, eta zenbait nabigatzailean inprimaki zehatz batean. Adibidez, Internet Explorer, ez dago akats bat, hau da, bikoitza marjina Bug izeneko da. Marjina parametro biderkatzen zuen biga, nabigatzaileak mugaren gunean elementu desplazamendu ondorioz. Hori saihesteko, nahikoa parametro marjina ehunekoa adierazi behar da. Normalean akatsen honetan denean gertatzen y eta propietate marjina Float point balioa.

#div {

flotatzen: ezker;

margin-left: 10px;

}

Kode hau elementu filmea izango Internet Explorer 20 px ezkerrean. honela kodea alda dezakezu:

#div {

flotatzen: ezker;

margin-left:% 10;

}

edo, hala

#div {

flotatzen: ezker;

marjina-eskuin: 10px;

}

Aukera horiek biak desplazamendu elementu arazoa konponduko.

Akatsak nabigatzailea eta okerra pantaila gune

Ez da hori bugs gerta daiteke nabigatzaileak bakarrik - merezi gogoratzeko Internet Explorer hori da. Google Chrome eta Mozilla-ren bertsio zaharragoa, gainera gaizki web modernoaren elementu batzuk bistaratu. konponketak horietako bakoitzerako, irtenbide bat aurkitu ahal izango duzu. Oro har, ohartu gara Float erabilera original eta erakargarri web diseinu bat sortuko du. oinarriak eta printzipioak jabetza horren ulertzea akatsak saihesteko eta bizitza inolako sustatzailearen errazteko lagunduko du.