float majtas shembuj css. Më shumë rreth pronës float

24.04.2019 Windows 10

Pasi u pyeta për herë të gjashtëdhjetë e tetë se pse blloku me një lundrues shfaqet gabimisht, vendosa të shkruaj këtë shënim, i cili do të shpjegonte situatat tipike me të cilat përballet një stilist rishtar, dhe gjithashtu që herën tjetër të mund të jap vetëm një lidhje për këtë artikull.

Mohim përgjegjësie

Unë nuk jam një stilist profesionist, megjithëse për nga natyra e aktivitetit tim më është dashur të krijoj më shumë se një duzinë faqesh. Unë kam miq që po mësojnë të dalin dhe dua t'i ndihmoj. Me shumë mundësi i keni edhe ju. Qëllimi i këtij artikulli nuk është të tregojë diçka të re, por të tregojë për të vjetrën nga pikëpamja e problemeve më të zakonshme që kanë projektuesit fillestarë të paraqitjes. Unë nuk pretendoj të vërtetën absolute të fjalëve të mia dhe do të jem i kënaqur vetëm nëse më korrigjoni dhe plotësoni.

Karakteristikat e elementit notues për t'u mbajtur parasysh

nëse është vendosur majtas ose djathtas

Artikulli shfaqet si një bllok, sikur të kishte ekran: bllok;
Elementi zvogëlohet në gjerësi në madhësinë e përmbajtjes, nëse elementi nuk është vendosur në mënyrë eksplicite në gjerësi;
Elementi shkopinj në skajin e majtë (majtas) ose të djathtë (djathtas);
Të gjitha të tjerat përmbajtja e faqes në kodin HTML pas elementi notues mbështillet rreth tij;

Rasti i jetës numër 1

Unë kam dy blloqe, kam aplikuar float: djathtas në njërin prej blloqeve, ai u rreshtua në të djathtë, por mbeti ende nën të parin. Një shembull se si duket.

Shkak

Nëse kjo ndodhi, atëherë ju aplikoni notimin jo në bllokun e parë, por në bllokun e dytë. Për shkak të faktit se elementi lundrues (ai me float) mbështjell vetëm ata elementë që hyjnë në kodin HTML pas atë, blloku i parë nuk do të mbështillet rreth tij.

Gjithashtu elementët e bllokut si parazgjedhje kanë gjerësinë maksimale të mundshme (provën) brenda prindit. Elementi juaj float thjesht nuk përshtatet në përputhje me elementin e parë të bllokut me gjerësia maksimale, kështu që shtyhet poshtë.

Njëjtën mënyrë të gjitha përmbajtja e faqes që vjen në kodin HTML pas elementet lundrues, rrjedh rreth tyre, gjë që shpesh çon në një efekt të papritur.

Zgjidhje

Zgjidhja numër 1 Vendosni në mënyrë të qartë lartësinë e enës. Në rastet kur dihet se cilat duhet të jenë përmasat e enës, kjo është zgjidhja më e thjeshtë.

Zgjidhja numër 2 Shto një bllok bosh me të qartë: të dyja . Shtimi i një elementi si ky pastron "lundrueshmërinë" e blloqeve dhe e bën kontejnerin të shtrihet në lartësinë e tij të plotë. Semantikisht, kjo nuk është zgjidhja më e mirë, pasi prezanton një element shtesë të shënjimit.

Zgjidhja numër 3 Aplikoni tejmbushjen: automatikisht (ose të fshehur) në . Shkakton që kontejneri të rillogarisë lartësinë dhe ta ndryshojë atë për të përfshirë elementë lundrues, përndryshe do të duhet të shtojë një shirit lëvizës ose t'i fshehë ato. Megjithatë, ndonjëherë ndodh, ndaj kini kujdes.

UPD
Lexo edhe nga si vazhdim i diskutimit të pronës float.

Përshëndetje, të dashur lexues të faqes së blogut! Pas një pushimi shumë domethënës, vendosa të vazhdoj temën mësimi i CSS dhe artikulli i sotëm do t'i kushtohet krijimit të elementeve lundrues duke përdorur float, duke përdorur shembuj praktikë, merrni parasysh veprimin këtë rregull së bashku me vetinë e qartë për të krijuar kolona dhe menu horizontale.

Për ata që nuk janë iniciuar, mendoj se do të ishte më e saktë që fillimisht të njiheni me materiale të tjera në fletët e stilit kaskadë. Më lejoni t'ju kujtoj se të gjithë artikujt në Kjo temë ndodhet në seksionin ku mund të merrni informacionin e nevojshëm.

Elementet lundruese gjenden gjithashtu në HTML kur është e nevojshme për të mbështjellë të njëjtat imazhe me tekst (atributi align etiketa img me parametrat majtas dhe djathtas). Pra, ky aspekt është mjaft i popullarizuar gjatë zhvillimit të përmbajtjes së faqeve të internetit.

Gjatë postimit të sotëm, do t'i hedhim një vështrim veprimet e rregullave notojnë (majtas, djathtas, asnjë) dhe të qarta duke përfshirë në lidhje me , të cilat janë bazë për faqosja e bllokut. Sigurisht, në fazën aktuale, shumica dërrmuese përdorin CMS progresive (në veçanti, WordPress) kur krijoni një faqe. Megjithatë, besoni se njohuritë e bazave të stileve dhe gjuhës së shënjimit të hipertekstit do t'ju shërbejnë mirë në të ardhmen.

Si krijohen notat në CSS duke përdorur float

Për të filluar, më lejoni t'ju kujtoj se në një rrjedhë normale, elementët e uebit rreshtohen në një faqe interneti në përputhje të plotë me rendin që është specifikuar në kod. Sidoqoftë, siç e dini, ka gjithmonë përjashtime. Kjo është logjike, pasi nevojitet një levë për të zgjidhur detyra jo standarde.

Një nga këto mjete është, për shembull, për të cilin mund të lexoni më shumë në lidhjen e dhënë. Epo, një mjet tjetër që ju lejon të ndryshoni rendin ekran standard elementet e ueb-it, shërben vetëm rregulli float.

Të dhënat për çdo pronë CSS (propeti) dhe vlerat e saj mund të mblidhen nga faqja e specifikimeve të W3C, ku jepet informacioni i plotë (të dhënat në versionin e dytë të fletëve të stilit, por kjo është gjithashtu e vërtetë për CSS3, e cila tashmë është zyrtare, edhe pse nuk është finalizuar plotësisht):

Siç mund ta shihni, float mund të marrë një nga tre parametrat e mundshëm (majtas, djathtas, asnjë) dhe (trashëgojë). noton asnjë aplikuar si parazgjedhje dhe do të thotë që elementët do të shfaqen në rendin që korrespondon me rrjedhën normale. Por djathtas ose majtas ju lejon të krijoni blloqe lundruese zhvendosur përkatësisht djathtas ose majtas.

Nëse ju kujtohet, më të përdorurat, të cilat sillen ndryshe (në përgjithësi, lloji i ekranit të të gjithë elementëve zbatohet duke përdorur CSS duke përdorur veçorinë Display). Nivelet e bllokut zënë të gjithë gjerësinë e disponueshme nëse nuk specifikohet gjerësia. Lartësia përcaktohet nga përmbajtja nëse parametri i lartësisë nuk është i specifikuar.

Etiketat inline janë të vendosura në një rresht dhe transferohen në një tjetër vetëm nëse hapësira e disponueshme në gjerësi mbaron. V rast i zakonshëm nuk është e mundur të specifikohet lartësia dhe gjerësia për to. Bazuar në këtë informacion, merrni parasysh një shembull specifik.

Për qartësi, le të lidhim rregullat CSS (kjo metodë zakonisht përdoret rrallë në praktikë, por është shumë e përshtatshme gjatë testimit).

Për t'u siguruar që sa më sipër është e saktë, le të marrim dy etiketa të vogla, duke shkruar për to vetitë e gjerësisë dhe lartësia si dhe një bllok etiketë. Për të siguruar qartësi, ne vendosim nuancat e ngjyrave për çdo bllok duke përdorur sfond (në mënyrë të ngjashme, ju mundeni):

element inline 1 Elementi inline 2

element blloku

Imazhi që rezulton do të jetë si më poshtë:

Siç mund ta shihni, ne kemi marrë konfirmim praktik se lartësia e specifikuar (lartësia:50px) dhe gjerësia (gjerësia:450px) nuk funksionojnë në kushte normale për etiketën SPAN, e cila është në linjë. Më pas, le të përpiqemi të vendosim veçorinë e djathtë float për elementin e parë të rrjetit të linjës dhe të lëvizim majtas për të dytin:

Elementi inline 1 Elementi inline 2

element blloku

Si rezultat, marrim:

Është mjaft e qartë se në këtë rast elementët e parë dhe të dytë të rrjetës bëhen lundrues (njëri është zhvendosur deri në të majtë, tjetri në të djathtë). Për më tepër, ata kanë fituar një gjerësi dhe lartësi, e cila është e specifikuar në stilet CSS.

Për më tepër, elementët e uebit të përcaktuar nga etiketa SPAN inline ndërveprojnë ndryshe me kontejnerin DIV ngjitur. Nëse heqim më tej, të themi, atributin gjerësi nga stilet e të dyjave etiketat SPAN, atëherë gjerësia e tyre do të përcaktohet nga përmbajtja (në rastin tonë, gjatësia e tekstit me emrin e elementeve):

Tani përmbajtja e bllokut DIV fillon të mbështillet në të djathtë të elementit web me float: majtas. Ka kuptim që të njiheni më qartë me rezultatet e kërkimeve praktike specifike në këtë faqe interneti, ku mund të provoni të ndryshoni vetë pamjen dhe të vëzhgoni se si sillen blloqet në lidhje me njëri-tjetrin:

Duke përmbledhur, le të përcaktojmë disa veçori që do të jenë të natyrshme në një enë me një ose një vlerë tjetër të pronës float (djathtas ose majtas):

Elementi zhvendoset në skajin e majtë ose të djathtë;
Bëhet bllokues pavarësisht se çfarë ishte më parë;
Sillet sikur elementët e ueb-it të bllokut ngjitur (me rregullin display:block) të mos ekzistojnë. Ju mund ta shihni këtë nëse hidhni një vështrim tjetër në pamjet e ekranit. këtë seksion artikuj;
Në të njëjtën kohë, etiketat inline (ekrani:inline) do të mbështillen rreth blloqeve lundruese. Nëse shikoni përsëri pamjen e mëparshme të ekranit, do të vini re se përmbajtja e kontejnerit DIV ("elementi i bllokut") mbështillet rreth SPAN me float: majtas në të djathtë.
Nëse nuk e specifikoni në mënyrë eksplicite gjerësinë e bllokut lundrues (në shembullin tonë, gjerësia: 450 px), atëherë ajo do të përcaktohet nga përmbajtja e tij;

Në këtë shembull, ne shikuam tiparet kryesore të blloqeve lundruese me parametra të ndryshëm të vetive float dhe zgjodhëm elementët e rrjetit inline dhe bllok (me vlera të ndryshme) për të komplikuar detyrën. Shfaq vlerat). Për të konsoliduar materialin, sigurohuni që të shikoni videon informuese nga E. Popov:

Si të krijoni një menu horizontale me CSS (float)

Më pas, ne do të analizojmë një detyrë shumë specifike të krijimit të një menuje horizontale duke përdorur blloqe lundruese, e cila përdoret shumë shpesh në zhvillimin e faqeve të internetit. Së pari, le të ndërtojmë , kodi i të cilit do të duket kështu:

Paragrafi 1
Pika 2
Pika 3
Pika 4
Pika 5

Ne marrim diçka të tillë:

Tani ne do të modifikojmë pak menunë që rezulton duke përdorur vetitë CSS: hiqni shënuesit përballë secilit prej artikujve duke përdorur asnjë të stilit të listës, konvertoni ato të linjës në ato bllokuese duke aplikuar rregullin e bllokut të ekranit tek ata dhe gjithashtu, për një ndryshim, jepni secili prej tyre një sfond të bukur.

Do të ishte gjithashtu e dobishme të vendosni kufijtë për të përmirësuar më tej dizajnin duke lëvizur paksa artikujt e menusë larg njëri-tjetrit. Për faqet e internetit të një faqeje WordPress, mund të vendosni etiketën "menu" UL, për të cilën mund të specifikoni stilet e nevojshme në skedarin STYLE.CSS:

Menyja (stili i listës: asnjë; diferencë: 0; mbushje: 15 px;) .menu li a (ekran: bllok; mbushje: 10 px; sfond:#EFCDB8;) .menu li (diferencë: 10 px;)

V këtë rast Unë qëllimisht nuk e përdor atributin STYLE sepse kjo do të kërkonte që të njëjtat veti CSS të specifikohen disa herë për çdo etiketë LI. Si rezultat i veprimeve tona, menyja do të duket si kjo:

Ndryshimi nga versioni i mëparshëm befasuese, apo jo? Tani kemi një foto që duket shumë më tepër si një menu klasike. Vërtetë, pikat në të janë të vendosura jo horizontalisht, por vertikalisht. Për zgjidhje e plotë duhet të shtohen detyra për elementin Lista HTML LI float la pronë, rregulli i plotë CSS për të bëhet:

Menyja li (margjina: 10 px; lundrues: majtas;)

Si rezultat, menyja do të kthehet në një version horizontal:

Unë mendoj se, bazuar në informacionin e dhënë më sipër, ju e kuptoni arsyen pse ndodhi një metamorfozë e tillë. Çdo element ueb i menusë me float majtas udhëhiqet nga vendndodhja e kontejnerit, kufijtë e tij dhe përpiqet të zërë vend duke lëvizur sa më shumë që të jetë e mundur lart-majtas. Kjo është pikërisht ajo që ndodhi me bllokun “Pika 1”, i cili u pozicionua në përputhje me rrethanat.

"Pika 2" u zhvendos gjithashtu në të majtë, por përparimi i saj i mëtejshëm u bllokua nga elementi i parë i ueb menusë. etj. Si rezultat, ne morëm një zinxhir serial horizontal të të gjithë përbërësve të menusë. Ju mund t'i shihni të gjitha detajet vetë. Tani le të përpiqemi të zvogëlojmë artificialisht gjerësinë e portit të shikimit:

Në rast se një element lundrues nuk gjen vend në krye, ai zë vendin më të lartë vertikalisht në rreshtin më poshtë dhe lëviz në pozicionin më të majtë. Në praktikë, shpesh ndodh që titulli i një artikulli të caktuar të jetë më i gjatë dhe të mos përshtatet brenda kufijve standardë. Nëse ky është artikulli i parë, atëherë e gjithë menyja mund të duket kështu:

Në këtë rast, "Artikulli 4" fillimisht merr në konsideratë kufirin më të lartë të sipërm dhe vetëm më pas kalon në pozicionin më të majtë, por godet elementin e parë të uebit. Nëse lartësia e, të themi, artikullit të tretë rezulton të jetë më e madhe, atëherë fotografia ndryshon në vijim:

Më pas "Pika 3" do të përafrojë pozicionin e saj me kufirin e poshtëm të elementit të fundit të rrjetit në rreshtin e sipërm dhe vetëm atëherë do të lëvizë majtas. Të gjitha gjestet e përshkruara më sipër duhet t'ju ndihmojnë të kuptoni thelbin e efektit të notit në pozicionin e elementeve të uebit në faqe.

Nëse në paraqitjen praktike ka probleme të ngjashme, atëherë mund të përdoren metoda të tjera për krijimin e një menuje horizontale në vend të vetive CSS float. Sidoqoftë, kjo është një temë më vete, të cilës do t'i drejtohemi patjetër në të ardhmen.

Efekti i aplikimit të vetive të qarta (të dyja, majtas, djathtas).

Tani le të shohim se si të përfitojmë nga veçoria e elementeve lundruese, por në të njëjtën kohë bëjmë që blloqet e radhës më poshtë në faqen e internetit të marrin parasysh pozicionin dhe madhësinë e tyre. Kjo mund të arrihet me një rregull të qartë. Përsëri, të gjitha informacionet mund të merren nga burimi origjinal (konsorciumi W3C):

rregull CSS clear ka katër vlera të mundshme, me pronën "none" që është e paracaktuar, gjë që është e natyrshme pasi siguron rrjedhën standarde të kodit. Gjithashtu e qartë (asnjë, majtas, djathtas, të dyja) trashëgohet nga etiketa prind (trashëgojë).

Thelbi i këtij rregulli, i shkruar për një bllok specifik, është të anuloni veprimin në varësi të vlerës së tij:

asnjë - anulon efektin e vetë pronës së qartë, si rezultat, përmbajtja e etiketës (për shembull, teksti) mbështillet rreth elementit të uebit në përputhje me stilet e specifikuara për të në formën e një lundrimi;
majtas dhe djathtas - eliminon mbështjelljen nga buza e majtë ose e djathtë, përkatësisht;
të dyja - Parandalon rrjedhjen djathtas dhe majtas në të njëjtën kohë. Kjo është vlera më e zakonshme e qartë në përdorim praktik.

Nuk mund të kuptojë asgjë? Në mënyrë të paqartë dhe vetëm me intuitë e kapni kuptimin? Asgjë, pasi të analizojmë një shembull vizual, mendoj se gjithçka do të bjerë në vend. Për ta bërë këtë, vendosëm detyrën: vendosim dy blloqe horizontalisht pranë njëri-tjetrit dhe vendosim një tekst më poshtë. Ky dizajn është mjaft i zakonshëm në paraqitje.

Pra, le të marrim dy kontejnerë DIV, të cilat në mënyrë skematike mund të jenë 2 kolona. Le të shkruajmë pronat CSS për ta, duke përfshirë gjerësi fikse(gjerësia), ngjyra e sfondit dhe duke i bërë ato të notojnë me notimin majtas. Le t'u shtojmë atyre tekst, të mbyllur në një etiketë P, e cila, siç e dini, është me shkronja të vogla:

Kolona e majtë

Kolona e djathtë

Blloqet DIV do të rreshtohen në një rresht horizontal, ku i pari do të shkojë sa më larg majtas të jetë e mundur. Dhe i dyti do të parkojë në skajin e tij të djathtë (për të do të jetë vendndodhja në të majtë), ndarja e parë nuk do të lëvizë më tej. Por teksti do të vazhdojë këtë rresht, pasi gjerësia totale e lejon atë:

Siç e kuptoni, në këtë situatë, detyra jonë nuk mund të konsiderohet e përfunduar. Së pari, kur ngushtoni portin e shikimit me një sasi më të vogël se gjerësia totale e divs, kolona e djathtë hidhet poshtë dhe ndodhet poshtë majtas. Së dyti, përmbajtja e elementit të tretë të uebit me tekst ndodhet pranë, dhe jo poshtë, kolonave:

Përsëri, ju mund ta shihni vetë se si do të sillen të gjithë elementët, duke ngushtuar dhe zgjeruar artificialisht zonën e shikimit. Për të eliminuar mangësitë e përshkruara, le të shtojmë një enë me vetitë CSS dhe të vendosim të gjitha shtresat ekzistuese brenda saj. Dhe gjithashtu shtoni një DIV shtesë bosh me rregullin e qartë të të dy CSS për të parandaluar që përmbajtja e bllokut të poshtëm (teksti) të mbështillet rreth kolonave djathtas dhe majtas:

Kolona e majtë

Kolona e djathtë

Ju lutemi vini re se për stilet e divës së madhe I marzhi i rregullit të shtuar: 0 automatik, me të cilin mund ta rreshtoni enën në qendër. Pamja që rezulton do të duket si kjo:

Tani detyra jonë është zgjidhur, pasi rezultati plotëson kushtet e vendosura: dy kolona janë të vendosura në një rresht horizontal, dhe përmbajtja poshtë elementit të uebit (TEXT) në kod do të mbetet rreptësisht në vendin e duhur nën kolona.

Kur gjerësia e zonës së shikimit zvogëlohet, dizajni do të mbetet në të njëjtën formë (në këtë rast, rrotull horizontale), të cilin mund ta verifikoni duke shkuar në faqen përkatëse të internetit me zgjidhjen ky shembull. Si shtesë, shikoni videon nga Evgeny Popov, e cila jep një shembull të shënjimit të faqes në internet duke përdorur float and clear (duke pastruar mbështjelljen):

Pyetjet rreth asaj se si funksionojnë pronat CSS float majtas dhe float djathtas lindin me rregullsi të lakmueshme. Kjo bëhet një temë veçanërisht e dhimbshme për dizajnerët dhe programuesit e paraqitjes, të cilët kanë mbledhur paraqitjet në tavolina për vite me radhë, dhe tani ata janë të detyruar të punojnë me blloqe. Për më tepër, kjo përkeqësohet nga çështjet e paraqitjes së shfletuesve, megjithëse kohët e fundit kjo temë është bërë disi më pak e bezdisshme për specialistët.

Në çdo rast, në vend që t'u përgjigjem vazhdimisht të njëjtave pyetje se si funksionon prona CSS float majtas dhe float djathtas, vendosa të shkruaj një postim dhe t'i dërgoj të gjithë ata që vuajnë.

Ju siguroj se nuk do të ketë asgjë veçanërisht të re në këtë postim. Ka shumë informacione të tilla në rrjet. Por sa herë që isha lodhur duke treguar një shembull në gishtat e mi ose duke kërkuar një lidhje ku ta dërgoja punonjësin tim të ardhshëm. Prandaj, këtu do të paraqitet një koleksion i shkurtër i asaj që hasni më shpesh.

Blloqe në një kontejner me të vendosura veçoritë CSS float majtas dhe float djathtas

Problemi tipik:

Ekziston një enë me dy blloqe ose më shumë.
Blloqet e brendshme kanë të vendosur pronat e tyre CSS float majtas ose djathtas.
Nëse madhësia e blloqeve nuk është e mjaftueshme, atëherë përmbajtja nga poshtë fillon të zvarritet në bllok dhe e gjithë faqosja shpërndahet.

Ilustrimet e mëposhtme tregojnë disa raste të tilla.

Situata me dy ose më shumë kuti me pronën e majtë CSS float

Ajo duhet të jetë:

Situata kur një bllok ka veçorinë CSS float majtas, dhe tjetri djathtas

Ajo duhet të jetë:

Si duket me paraqitjen e gabuar:

Pse ndodhi kjo situatë

Blloqet tona float majtas dhe noton djathtas CSS janë brenda një kontejneri që ka disa mbushje nga fundi. Pavarësisht se në dukje është e vërtetë vendosni parametrat, dhëmbëzimi i poshtëm jo vetëm që nuk funksionon, por edhe përmbajtja e blloqeve të poshtme futet në bllokun tonë të sipërm.

Gjë është se blloqet me veçori notuese të vendosura nuk ndikojnë në lartësinë e enës së tyre.

Për shembull: në rastin e parë, të gjitha blloqet brenda kontejnerit janë lundrues. Prandaj, lartësia e enës do të jetë zero.

Në rastin e dytë, përveç blloqeve lundruese, kemi edhe tekst në kontejner. Prandaj, lartësia e kontejnerit do të korrespondojë me lartësinë e tekstit që mbush këtë bllok. Prandaj, nëse teksti është më i madh se lartësia e blloqeve të brendshme lundruese, nuk do të vini re ndonjë problem. Nëse nuk ka tekst të mjaftueshëm, si në shembullin e mësipërm, atëherë përmbajtja e blloqeve të poshtme do të ngjitet në kufirin e poshtëm të kontejnerit.

Zgjidhja 1 shtoni një bllok bosh me vetitë CSS të qarta: të dyja

Përpara etiketës mbyllëse të kontejnerit, duhet të vendosni një bllok me pronën CSS clear:both. Pastaj kontejneri do të zgjerohet në bllokun e poshtëm, pasi kjo veti bllokon ndikimin e blloqeve me veçorinë CSS float majtas dhe float djathtas.

Shembull i kodit të faqes:

Lagjja Epsilon është dukshëm e përmbysur nga seria abstrakte Taylor, siç synohet.

Gjithashtu, një bllok i qartë: të dy mund të vendoset menjëherë pas etiketës mbyllëse të kontejnerit ose pas bllokut të fundit lundrues. Enë në këtë situatë nuk do të ndryshojë madhësinë e saj. Po dhe nga në përgjithësi nuk do të jetë e nevojshme, por blloku i qartë: të dy thjesht klipet përmbajtjen nga blloqet lundruese.

Shembull i kodit të faqes:

Lagjja Epsilon është dukshëm e përmbysur nga seria abstrakte Taylor, siç synohet.

Sidoqoftë, jo të gjithë e dinë se fusha e drejtimeve korrespondon me përcaktuesin e sistemit të ekuacioneve lineare, gjë që nuk është për t'u habitur. Për më tepër, përcaktori i sistemit të ekuacioneve lineare rikthen kategorikisht vektorin, siç pritej. Lagjja e pikës është ende e kërkuar. Lema, siç vijon nga sa më sipër, në thelb stabilizon serinë abstrakte divergjente, e cila padyshim do të na çojë drejt së vërtetës. Lema zbërthen kuptimisht logaritmin natyror të pakundërshtueshëm, përllogaritjet e mëtejshme do t'u lëmë nxënësve si detyrë të thjeshtë shtëpie.

Shembull i kodit CSS:

Kontejneri ( shfaqja: bllok; ) .in_block ( shfaqja: bllok; lundrues: majtas; gjerësia: 100 pikselë; lartësia: 100 px; margjina-djathtas: 10 px;) 0px !e rëndësishme; e qartë: të dyja !e rëndësishme; lundrues: asnjë !e rëndësishme; lartësia: 1px !e rëndësishme; gjerësia: automatike !e rëndësishme; )

Metodikisht - jo zgjidhja më elegante, megjithëse meriton të drejtën e jetës, pasi është mjaft efektive. Një disavantazh i qartë është fakti që duhet të shtojmë kod shtesë në tekstin e faqes.

Zgjidhja 2 specifikon në mënyrë eksplicite lartësinë e kontejnerit

Opsioni i lartësisë së kontejnerit është i mirë vetëm nëse e dini saktësisht se çfarë madhësie supozohet të jetë përmbajtja e kontejnerit. Atëherë CSS-ja jonë do të duket diçka si kjo:

Kontejneri ( ekrani: bllok; lartësia: 100 pikselë; ) .në_block ( shfaqja: bllok; notimi: majtas; gjerësia: 100 px; lartësia: 100 px; margjina djathtas: 10 px; )

Në rastin kur përmbajtja është dinamike ose paraqitja është "fluid" dhe gjerësia e kontejnerit mund të ndryshojë, atëherë kjo nuk do të jetë një zgjidhje aq e mirë.

Zgjidhja 3 vendos veçorinë e tejmbushjes CSS në kontejner

Nëse vendosni vlerën e një vetie kontejneri vërshoj të barabartë auto ose i fshehur, shfletuesi do të rindërtojë kontejnerin që të përshtatet me të gjitha notat dhe të mos shfaqë shiritat e lëvizjes.

Nëse e vendosni vetinë e tejmbushjes në vlera automatike, atëherë përgatituni për faktin se në disa situata mund të shfaqen ende shirita lëvizës. Prandaj, duhet të kontrolloni plotësisht paraqitjen në mënyra të ndryshme.

Shembull i kodit CSS:

Kontejneri ( shfaqja: bllok; tejmbushja: automatik; ) .in_block (ekrani: bllok; notimi: majtas; gjerësia: 100 px; lartësia: 100 px; margjina-djathtas: 10 px; )

Dy kuti në të njëjtin nivel me veçoritë CSS të notimit majtas dhe float djathtas të specifikuara

Një situatë tipike: tekst që mbështillet rreth dy blloqeve me disa përmbajtje. Në këtë rast, blloqet janë të vendosura në anët e tekstit.

Ajo duhet të jetë:

Nja dy vjet më parë, kur zhvilluesit filluan të lëviznin drejt HTML pa tabela, prona CSS float papritmas mori një rol shumë të rëndësishëm. Arsyeja pse vetia float u bë kaq e zakonshme ishte sepse, si parazgjedhje, elementët e nivelit të bllokut nuk rreshtoheshin pranë njëri-tjetrit në një format të bazuar në kolonë. Meqenëse kolonat kërkohen pothuajse në çdo paraqitje të CSS, kjo pronë është përdorur - madje është abuzuar.

Pronës float në css, i lejon zhvilluesit të përfshijë kolona të ngjashme me tabelën Shënimi HTML pa tavolina. Nëse jo për pronën noton, pastaj skemat Vendosja e CSS nuk do të ishte e mundur përveç përdorimit të pozicionimit absolut dhe relativ - i cili do të ishte i ngathët dhe do ta bënte paraqitjen të pambajtur.

Në këtë artikull, ne do të tregojmë çfarë është një pronë noton dhe si ndikon në elementë në kontekste specifike. Ne gjithashtu do të hedhim një vështrim në disa nga ndryshimet që mund të lindin me këtë pronë në shfletuesit më të përdorur. Së fundi, ne do të demonstrojmë disa aplikime praktike Vetitë noton. Kjo duhet të sigurojë gjithashtu një diskutim gjithëpërfshirës dhe të plotë të kësaj prone dhe ndikimit të saj në zhvillimin e CSS.

Përkufizimi dhe sintaksa e pronës CSS Float

Qëllimi i vetive float është të shtyjë një element blloku majtas ose djathtas duke e nxjerrë atë nga rrjedha e dokumentit. Kjo lejon që përmbajtja aktuale të mbështillet natyrshëm rreth elementit lundrues. Ky koncept është i ngjashëm me atë që shihni çdo ditë në literaturën e shtypur, ku fotografi dhe të tjera elementet grafike, rreshtuar në secilën anë dhe përmbajtja (zakonisht teksti) rrjedh natyrshëm rreth elementit të rreshtuar rreth skajit të majtë ose të djathtë.

Në imazhin e mësipërm, seksioni "Lexuesit e revistës .net" me 3 foto lexuese të mbetura të rreshtuara në kolonat e tyre me tekst që mbështillet rreth imazheve. Kjo është ideja bazë e vetive float në paraqitjet CSS, dhe tregon një nga mënyrat se si përdoret në hartimin e tabelës.

Fuqia e përdorimit të notave në paraqitjen me shumë kolona u shpjegua nga Douglas Bowman në 2004 në prezantimin e tij klasik No More Tables:

Bowman shpjegoi parimet pas paraqitjes pa tavolinë duke përdorur një sajt të vjetër të Microsoft si referencë. Float u përdorën në mënyrë të dukshme në rinovimin e tij të modeluar nga Microsoft.

Sintaksë

Vetia Float mund të marrë një nga 4 vlerat: majtas (majtas), djathtas (djathtas), pa shtrirje (asnjë) dhe trashëguar (të trashëguar). Kjo është deklaruar siç tregohet në kodin më poshtë:

#shirit anësor (lundrues: majtas; )

#bar anësor(

noton: majtas;

Vlerat më të përdorura janë majtas dhe djathtas. Vlera asnjë ose vlera fillestare noton për disa Elementi HTML-pages është parazgjedhja. Të trashëgojë vlerën(trashëgimi) i cili mund të aplikohet pothuajse në çdo pronë CSS nuk funksionon në të gjithë versionet Internet Explorer, duke përfshirë 7.

Vetia float nuk kërkon që ndonjë veçori tjetër të zbatohet në një element float, megjithatë, për të funksionuar siç duhet, një float do të funksionojë në mënyrë më efikase në rrethana të caktuara.

Në përgjithësi, një element lundrues duhet të ketë gjerësia e vendosur në mënyrë eksplicite(nëse nuk është një element i zëvendësuar, si p.sh. një imazh). Kjo siguron që float të sillet siç pritej dhe ndihmon në shmangien e problemeve në disa shfletues.

#bari anësor ( notues: majtas; gjerësia: 350 px; )

#bar anësor(

noton: majtas;

gjerësia: 350 px

Karakteristikat e elementeve lundrues

Më poshtë është një listë e sjelljes së elementeve lundrues, sipas specifikimit CSS2:

blloku i lundruar majtas do të notojë në të majtë derisa skaji i tij i majtë (ose kufiri i skajit nëse nuk ka skaj) të prekë ose skajin e përmbajtjes së bllokut ose skajin e një blloku tjetër të notuar

Nëse madhësia e bllokut të notuar tejkalon hapësirën horizontale të disponueshme, atëherë blloku i lundruar do të shtyhet poshtë

Elementet e nivelit të bllokut jo të pozicionuar dhe të palundrueshëm veprojnë si elementë lundrues, d.m.th. është jashtë rrjedhës së dokumentit

Skajet e një blloku të lundruar nuk do të përputhen me skajet e blloqeve ngjitur

elementi rrënjë ( ) nuk mund të lundrohet

Një element inline, ai që është i lundruar, konvertohet në një element të tipit bllok

Float në praktikë

Rasti më i zakonshëm i përdorimit për veçorinë float është vendosja e një imazhi me tekst të mbështjellë rreth tij. Për shembull:

Enean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.

Donec non enim in turpis pulvinar facilisis. Utfelis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

CSS e aplikuar në imazhin në kutinë e mësipërme duket kështu:

img ( float: majtas; margjina: 0 15px 5px 0; kufiri: solid 1px #bbb; )

img(

noton: majtas;

margjina: 0 15px 5px 0;

kufiri: solid 1px #bbb;

E vetmja veti që mund ta arrijë këtë efekt është vetia float. Vetitë e tjera (diferenca dhe kufiri) janë aty për arsye estetike. Elementë të tjerë në bllok (etiketat

Me tekst në to) nuk keni nevojë për ndonjë stil.

Siç u përmend më herët, elementët floated shtyhen jashtë rrjedhës së dokumentit, ndërsa elementët e tjerë të bllokut mbeten në rrjedhë, duke vepruar sikur elementi i lëvizur të mos ishte as aty. Kjo është demonstruar vizualisht më poshtë:

Kjo kuti qarkullon majtas

Kjo

Elementi ka një ngjyrë të ndryshme sfondi për të treguar se shtrihet në gjerësinë e prindit të tij, duke injoruar elementin e lundruar. Ky tekst inline, megjithatë, mbështillet rreth kutisë së lëvizur.

Në shembullin e mësipërm

elementi i nivelit të bllokut, kështu që ai injoron elementin e lundruar që përfshin gjerësinë e kontejnerit (minus mbushjen). Të gjithë elementët e tipit bllok jo-lundrues do të sillen në mënyrë të ngjashme.

Teksti në paragrafin është në linjë, kështu që mbështillet rreth elementit të lundruar. Ofrohet edhe blloku i lundrueshëm parametrat e marzhit për ta zhvendosur atë nga paragrafi, duke e bërë atë vizualisht të pastër në mënyrë që elementi i paragrafit të injorojë bllokun e lundruar.

Pastrimi i notave

Problemet e paraqitjes me float zakonisht zgjidhen duke përdorur veçorinë CSS Clear, e cila ju lejon të "pastroni" elementët e notuar nga e majta ose e djathta ose nga të dyja anët.

Le të shohim një shembull që shfaqet shpesh - një fund i faqes mbështillet në anën e djathtë të një plan urbanistik me 2 klonime:

Kolona e majtë kaloi majtas

Nëse shikoni faqen IE6 dhe IE7, nuk do të shihni asnjë problem. Kolonat e majta dhe të djathta janë në vend, dhe fundi është në fund. Por në Firefox, Opera, Safari dhe Chrome, do të shihni se fundi i faqes lëviz nga vendi. Kjo është shkaktuar nga float që aplikohet në kolona. Kjo është sjellja e duhur, megjithëse është më problematike. Për të zgjidhur këtë problem, ne përdorim veçorinë e qartë të mësipërme, në lidhje me fundin:

#footer (e qartë: të dyja; )

#footer (

qartë: të dyja;

Rezultati tregohet më poshtë:

Kolona e majtë kaloi majtas

Kolona e djathtë gjithashtu lundronte majtas

Vetia "clear" do të pastrojë vetëm elementët e lundruar, kështu që aplikimi i qartë: të dyja në të dyja kolonat nuk do të bënte që futeri të bjerë poshtë, sepse futeri nuk është një element i lëvizur.

Vetia e pastër do të pastrojë vetëm elementët e lundruar. Përdorimi i qartë është se të dy kolonat nuk do të heqin fundin sepse nuk është një element i lundruar.

Pra, përdorni "clear" në elementët e palundrueshëm, dhe madje ndonjëherë në elementët e notuar, për të detyruar elementët e faqes në vend.

Rregullimi i prindit të braktisjes

Një nga më tipare të përbashkëta shënimi me float, është "prind i braktisjes". Kjo tregohet në shembullin e mëposhtëm:

Banor pellentesk morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Vini re se baza e imazhit të lundruar shfaqet jashtë prindit të tij. Prindi nuk zgjerohet plotësisht për të përmbajtur imazhin e lundruar. Kjo është për shkak të asaj që diskutuam më herët: elementi i lundruar është jashtë rrjedhës natyrore të dokumentit, megjithëse shfaqen të gjithë elementët e bllokut, por elementi i lundruar nuk është aty. Ky nuk është një gabim CSS, gjithçka është në përputhje me specifikimet e CSS. Të gjithë shfletuesit bëjnë të njëjtën gjë në këtë shembull. Eshtë e panevojshme të thuhet, në këtë shembull, shtimi i një gjerësie në kontejner do të parandalojë problemin në IE, por gjithashtu duhet ta rregullojë problemin në Firefox, Opera, Safari ose Chrome.

Zgjidhja 1: Noton për enë

Mënyra më e lehtë për të zgjidhur këtë problem është të notoni elementin prind:

Tani ena zgjerohet për të përshtatur gjithçka elementet fëmijë. Por, për fat të keq, ky rregullim do të funksionojë vetëm numër i kufizuar raste, pasi prindi lundrues mund të ketë pasoja të padëshirueshme për paraqitjen tuaj.

Zgjidhja 2: Shtimi i shënimit shtesë

Kjo është një metodë e vjetëruar, por është një opsion i lehtë. Thjesht shtoni një element shtesë në fund të enës dhe "pastroni" atë. Ja se si do të duket kodi HTML pas zbatimit të kësaj metode:

XHTML

"//media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/lifesaver.jpg" gjerësi = "200" lartësi = "222" alt = "" />

Dhe CSS që rezulton zbatohet në elementët e rinj:

Clearfix (e qartë: të dyja;)

sqaroj (

qartë: të dyja;

Ju gjithashtu mund ta bëni këtë me
etiketë me stil të vlefshëm. Sido që të jetë, do të merrni rezultatin që dëshironi: kontejneri prind do të zgjerohet për të përfshirë të gjithë fëmijët e tij. Por kjo metodë nuk rekomandohet pasi shton kodin josemantik në shënimin tuaj.

Zgjidhja 3: Pseudo element pas

Pseudo-elementi :after shton një element në faqen e dhënë HTML. Kjo teknikë është përdorur mjaft gjerësisht për të zgjidhur problemet e pastrimit të notit. Ja se si duket CSS:

Clearfix:after (përmbajtja: "."; shfaqja: bllok; lartësia: 0; qartë: të dyja; dukshmëria: e fshehur; )

Pastro: pas (

përmbajtja: "." ;

shfaqja : bllok ;

lartësia: 0

qartë: të dyja;

dukshmëria: e fshehur;

Klasa "clearfix" CSS zbatohet për çdo kontejner që ka fëmijë float dhe nuk zgjerohet për t'i përfshirë ato.

Por kjo metodë nuk funksionon për Internet Explorer para versionit 7, kështu që për IE duhet të aplikoni një nga opsionet e mëposhtme:

Clearfix (ekrani: inline-block; ) .clearfix (zoom: 1;)

sqaroj (

ekrani: inline-block;

sqaroj (

zmadhimi: 1;

Në varësi të llojit të problemit, keni të bëni me një nga dy zgjidhjet që do ta zgjidhin këtë problem në Internet Explorer. Duhet të kihet parasysh se vetia e zmadhimit nuk është një standard i pronës së Microsoft-it dhe për këtë arsye CSS-ja juaj nuk do të jetë e vlefshme.

Meqenëse pseudoelementi :after nuk funksionon në IE6/7, kodi është pak i fryrë dhe i ndërlikuar dhe kërkohet një stil shtesë vetëm për IE, kështu që kjo zgjidhje nuk është menyra me e mire, por ndoshta më e mira që kemi parë deri më tani.

Zgjidhja 4: Vetia e tejmbushjes

Deri tani, mënyra më e mirë dhe më e lehtë për të zgjidhur problemin e braktisjes së prindit është shtimi i tejkalimit: i fshehur ose i tejmbushur: automatik në elementin prind. Është i qartë, i lehtë për t'u mirëmbajtur, funksionon pothuajse në të gjithë shfletuesit dhe nuk shton asnjë shënim shtesë.

Vini re se thashë "pothuajse" në të gjithë shfletuesit. Kjo për shkak se nuk funksionon në IE6. Por, në shumë raste, kontejneri prind do të ketë një gjerësi të caktuar, e cila rregullon problemin në IE6. Nëse kontejneri prind nuk ka gjerësi, mund të shtoni një stil vetëm për IE6 me kodin e mëposhtëm:

// Ky rregullim është vetëm për IE6 .clearfix (lartësia: 1%; vërshimi: i dukshëm; )

// Ky rregullim është vetëm për IE6

sqaroj (

lartësia: 1%

vërshoj: i dukshëm

Në IE6, vetia e lartësisë trajtohet gabimisht si min-lartësia, duke detyruar kështu kontejnerin të përfshijë fëmijët e tij. Vetia Overflow më pas kthehet në "të dukshme" për të siguruar që përmbajtja të mos fshihet ose të lëvizet.

E vetmja pengesë e përdorimit të metodës së tejmbushjes (në çdo shfletues) është mundësia që përmbajtja e elementit të ketë shirita lëvizës ose të fshehë përmbajtjen. Nëse ka ndonjë element me marzhe negative ose të pozicionuar absolutisht në prind, ato do të fshihen nëse shkojnë jashtë prindit, kështu që kjo metodë duhet përdorur me kujdes. Duhet gjithashtu të theksohet se nëse elementi i përmbajtur do të kishte një lartësi ose min-lartësi të caktuar, atëherë definitivisht nuk do të mund të përdorni metodën e tejmbushjes.

Pra, nuk është vërtet e lehtë për t'u zgjidhur përmes shfletuesve ky problem. Por pothuajse çdo problem i pastrimit të lundrimit mund të zgjidhet me një nga metodat e mësipërme.

Gabime të lidhura me float në Internet Explorer

Gjatë viteve ka pasur shumë artikuj të botuar në internet duke diskutuar gabimet e zakonshme lidhur me float in Shënimi CSS. Të gjithë ata, jo çuditërisht, merren me probleme specifike për Internet Explorer. Më poshtë, do të gjeni një listë lidhjesh me një numër artikujsh që diskutojnë çështje të lidhura me float:

Ndryshimi i vetive float me JavaScript

Për të ndryshuar një vlerë CSS në JavaScript, duhet të aksesoni stilin e objektit duke konvertuar vetinë e synuar CSS në një "Camel case" Për shembull, vetia "margin-left" CSS bëhet marginLeft, vetia e sfondit të ngjyrës bëhet BackgroundColor dhe kështu. në. Por me veçorinë float, gjërat janë të ndryshme sepse fjala float është tashmë e rezervuar në JavaScript. Prandaj, sa vijon do të ishte e pasaktë:

stil. styleFloat = "majtas" ;

// Për të gjithë shfletuesit e tjerë

myDiv. stil. cssFloat = "majtas" ;

Përdorimi praktik i Float

Floats mund të përdoren për të kryer një gamë të gjerë detyrash në paraqitjen CSS. Disa shembuj janë përshkruar këtu.

2-kolona, gjerësi fikse

3 kolona, Struktura me lartësi të barabartë

Imazhi i lundruar me titull.

Ngjashëm me atë që diskutuam më parë në Float in Practice, Max Design përshkruan se si një imazh float me një titull lejon që teksti të mbështillet natyrshëm rreth tij.

Lundrimi horizontal me lista të pa renditura

Vetia float është një komponent kyç në kodimin e shiritave të navigimit horizontal të bazuar në sprite. Chris Spooner nga Line25 përshkruan se si të krijoni një Menu të Awesomeness që ka etiketat

, duke mbajtur butonat e navigimit përdorni float: majtas:

Për të demonstruar rëndësinë e vetive float në këtë shembull, këtu është një pamje e të njëjtit imazh pas përdorimit të firebug për të hequr float: majtas:

Galeritë e fotografive të bazuara në rrjet

Një përdorim i thjeshtë i veçorisë float është të float:left një seri fotografish të përfshira në një listë të pa renditur, e cila prodhon të njëjtin rezultat me atë që mund të shihni në një paraqitje tabele.

Faqja kryesore e produkteve të Kanadasë (shih imazhin më lart) shfaq produktet e saj në një format rrjeti, pranë shiritit anësor. Fotografitë shfaqen si një listë e pa renditur me një veçori float, për të gjithë
elementet e vendosur për të notuar: majtas. Kjo funksionon më mirë se një rrjet tabele, sepse numri i fotove në një galeri mund të ndryshojë dhe faqosja nuk do të ndikohet.

Faqja futons e Paragon Furniture (shih imazhin më lart) ka një shembull tjetër të një faqe produkti që përdor një listë të pa renditur me etiketa të lundruara
.

Në faqen e rezultateve të kërkimit të iStockphoto (shih imazhin më lart) i njëjti rrjet fotografish të strukturuara, këtu fotot përmbajnë float:left
etiketa, jo
etiketa.

radhitje fushat me një buton

Modelimi i parazgjedhur i elementeve të formës për shfletues të ndryshëm mund të jetë problematike. Shpesh në një fushë të vetme formulari, siç është një formular kërkimi, duhet të vendosni element pranë butonit të dorëzimit.

e saktë Përdorimi i CSS Karakteristikat e float mund të jenë një detyrë e frikshme edhe për një kodues me përvojë. Ky artikull mbledh përdorimet e float, si dhe disa nga gabimet, me shembuj ilustrues.
Çfarë është float?
Disa elementë në CSS janë elementë blloku dhe për këtë arsye fillojnë në një linjë të re. Për shembull, nëse vendosni dy paragrafë me etiketa P, ato do të vendosen njëri nën tjetrin. Elementët e tjerë janë "inline", d.m.th. shfaqen në faqe në një rresht.
Një mënyrë për të ricaktuar elementët një lloj mbështjelljeje është përdorimi i vetive float. Një shembull klasik është përdorimi i float për të rreshtuar një imazh majtas ose djathtas. Këtu është HTML e thjeshtë për figurën dhe paragrafin:

Lorem ipsum...

Ato shfaqen në një linjë të re:
Shtojmë pak imazh css:
img (float: djathtas; margjina: 20 px; )
Rezultati është i rreshtuar djathtas:
Nëse ka më shumë tekst, atëherë paragrafi do të përfundojë rreth imazhit:
Le të themi se duhet të bëjmë një dhëmbëzim prej 20 pikselësh midis imazhit dhe tekstit. Ky ndërtim nuk do të funksionojë: p (diferencë: 20 px;)
Korrigjo si kjo:
img (diferencë: 20 px;)
Pse nuk funksionon indenti i paragrafit? Për ta kuptuar, le të shtojmë një kornizë:
P (kufi: solid 1px e zezë; )
Rezultati mund t'ju befasojë:
Rezulton se fotografia është brenda një paragrafi! Prandaj nuk funksionon pronë e marzhit Në rastin e parë. Për ta rregulluar këtë, mund të lundroni:lëni paragrafin dhe të specifikoni një gjerësi absolute:
Rregulla të çuditshme notimi
Le të kalojmë në përdorime më të avancuara të float: rregullat që rregullojnë objektet lundruese. Kjo mund të jetë e nevojshme kur shtroni një galeri imazhesh. Për shembull:
Si parazgjedhje, çdo artikull i listës do të shfaqet në një rresht të ri. Nëse aplikoni float:left për secilin, imazhet do të rreshtohen me një ndërprerje vije:
Li (lundrues: majtas; diferencë: 4 px; )
Por, çka nëse imazhet janë me lartësi të ndryshme?
Nëse shtojmë një ekran me një rresht në elementët e listës, ai do të dalë pak më i bukur:
Li (ekrani: inline;)
Dhe tani rreshtojeni vertikalisht:
Img (drejtimi vertikal: lart; )
Duhet mbajtur mend se në rastin e një lartësie më të madhe të imazhit, imazhet e mbetura mbështillen vetëm rreth një të mëparshmi, për shembull:
Një shembull i ndryshimit të renditjes së elementeve - për shembull, ne kemi një listë të elementeve sipas renditjes:
Nëse duam t'i vendosim në rend të kundërt, thjesht përdorim float:right në vend të float:left dhe nuk kemi pse të ndryshojmë rendin në HTML:
Float-et janë të përshtatshme për grupimin e elementeve në faqe, por problemi i madh është se elementët pasues (tekst ose bllok) gjithashtu marrin një veti mbështjellëse. Për shembull, ne kemi një bllok fotografish:
Teksti poshtë tij fillon të mbështillet rreth të gjithë bllokut:
Për të shmangur këtë, duhet të përdorni pronën e qartë. Nëse e zbatojmë atë në imazhin e dytë:
Ul li:nth-child(2) (e qartë: majtas;)
Ne marrim këtë:
Në këtë rast, pjesa tjetër e imazheve vazhdojnë të trashëgojnë float:left. Prandaj, teksti do të shfaqet në mënyrë të ngathët:
Ju duhet të aplikoni qartë: të dyja në paragrafin:
P (e qartë: të dyja;)
Problemi ynë është zgjidhur:
Tani le të themi se duam të vendosim sfondin për galerinë nga shembujt e mëparshëm. Nëse elementët nuk do të lundronin, atëherë ky do të ishte rezultati:
Ul (sfondi: gri;)
Por nëse aplikoni float:left tek elementët e listës, sfondi zhduket fare:
Nëse së pari vendosim lartësinë për UL:
Ul (lartësia: 300 px; )
Kjo gjithashtu nuk e zgjidh problemin, sepse. dimensionet e sfondit janë vendosur absolutisht. Do të na ndihmojë klasa clearfix, e cila do të aplikohet në div në të njëjtin nivel me elementët UL.
Clearfix (e qartë: të dyja;)
Ekziston një zgjidhje tjetër, duke përdorur tejmbushjen:
Ul (mbushje: automatik;)
Nëntë rregulla të notimit:
1. Elementet lundrues nuk mund të shtrihen përtej skajit të kontejnerit të tyre mëmë.
2. Çdo element lundrues do të shfaqet djathtas ose poshtë atij të mëparshmi me float:majtas, ose majtas dhe poshtë me float:djathtas.
3. Një bllok me float:left nuk mund të jetë më shumë në të djathtë se një bllok me float:djathtas.
4. Një element lundrues nuk mund të shtrihet përtej kufirit të sipërm të kontejnerit të tij.
5. Një element lundrues nuk mund të pozicionohet më lart se kutia mëmë ose elementi i mëparshëm lundrues.
6. Një element lundrues nuk mund të jetë më i lartë se rreshti i mëparshëm i elementeve të linjës
7. Blloku lundrues duhet të vendoset sa më lart që të jetë e mundur.
8. Një element lundrues pas tjetrit nuk mund të shkojë përtej kontejnerit të tij - ai përfundon në rreshtin tjetër.
9. Një bllok me float: majtas duhet të vendoset sa më larg majtas të jetë e mundur, dhe një bllok me float: djathtas duhet të vendoset sa më shumë në të djathtë.