Float dhe clear janë vetitë CSS për elementët lundrues në paraqitjen e bllokut. Më shumë rreth pronës float

Në dizajnin modern të uebit, prona noton përdoret pothuajse në çdo hap. Por, pavarësisht nga një përhapje e tillë, jo të gjithë e kuptojnë mekanizmin e blloqeve lundruese, sjelljen e tyre dhe çfarë pasojash mund të ketë nga përdorimi i tyre.

Çfarë është "float"?

notonështë një pronë e pozicionimit CSS. Për të kuptuar thelbin dhe origjinën e tij, duhet t'i kushtoni vëmendje dizajnit të printimit. Në paraqitjet e printuara, imazhi mund të pozicionohet në mënyrë që teksti të mbështillet rreth tij. Kjo zakonisht quhet " mbështjellja e tekstit".

Në paraqitjen e faqes, blloku që përmban tekstin mund të specifikohet për t'u përdorur mbështjellja e tekstit rreth një imazhi ose injoroni mbështjelljen. Injorimi i mbështjelljes së tekstit do të lejojë që fjalët të rrjedhin mbi imazhin sikur të mos ishte aty. Ky është ndryshimi nëse imazhi është pjesë e rrjedhës në faqe apo jo. Në dizajnin e uebit, gjithçka është shumë e ngjashme.

Në dizajnin e uebit, një element me një veti CSS aplikohet në të noton do të sillet si një imazh me tekst të mbështjellë rreth tij në paraqitjen e printimit. Elementet lundruese mbeten pjesë e rrjedhës së faqes së internetit. Kjo nuk është aspak si elementët e pozicionuar absolut, të cilët hiqen nga rrjedha, sikur në paraqitjen e printuar kutisë së tekstit t'i ishte thënë të injoronte mbështjelljen e imazhit. Elementet e pozicionuar absolutisht nuk ndikojnë në vendosjen e elementeve të tjerë, dhe elementët e tjerë nuk ndikojnë në vendosjen e tyre.

Vendosja e një prone noton për elementët me CSS duket kështu:

#bari anësor (float: djathtas; )

Ekzistojnë katër vlera të vlefshme për një pronë noton - majtas, drejtë, asnje, trashëgojnë. Dy të parat majtas dhe drejtë tregoni drejtimin e vendndodhjes - majtas dhe djathtas, përkatësisht. Asnje- vlera e paracaktuar, tregon se elementi nuk është lundrues dhe trashëgojnë duke udhëzuar elementin të trashëgojë vlerën e pasurisë noton nga elementi mëmë.

Për çfarë përdoret float?

Përveç shembullit të thjeshtë të mbështjelljes së tekstit rreth një imazhi, noton mund të përdoret për të krijuar paraqitje në internet.

noton, është gjithashtu i dobishëm për elementë të vegjël të paraqitjes. Për shembull, merrni këtë fragment të vogël të një faqe interneti. Nëse vendosim pronën noton për një imazh të vogël avatar, kur imazhi ndryshohet, mbështjellja do të ndryshojë sipas dimensioneve të reja të imazhit:

E njëjta paraqitje mund të zbatohet duke përdorur pozicionimin relativ të kontejnerit dhe pozicionimin absolut të avatarit dhe tekstit brenda tij. Por në një paraqitje të zbatuar në këtë mënyrë, ndryshimi i madhësisë së figurës nuk do të ndikojë në bllokun e tekstit, pasi elementët me pozicionim absolut nuk ndikojnë në elementë të tjerë dhe elementë të tjerë nuk ndikojnë në to.

Rivendosja e mbështjelljes

Qartë pronë e lidhur me pronën noton. Element me veti të vendosur qartë nuk do të lëvizë lart rreth elementit me grupin e vetive noton, por do të lëvizë poshtë, duke injoruar rrjedhën. Dhe përsëri, një ilustrim që do të shpjegojë gjithçka pa vonesë.

Në shembullin e mësipërm, shiriti anësor lundroi në të djathtë të bllokut kryesor të përmbajtjes. "Foteri" është zhvendosur në hapësirën e lirë nën shiritin anësor, duke rrjedhur rreth bllokut me përmbajtjen kryesore. Zgjidhja e këtij problemi është vendosja e vlerës së pronës clear:both në "footer" për të "pastruar" mbështjelljen rreth të dy kolonave.

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

Pronës qartë ka katër kuptime. te dyja përdoret për të rivendosur rrjedhën në të dy drejtimet. Majtas dhe E drejta përdoren për të rivendosur një drejtim - majtas ose djathtas, përkatësisht. Asnje- vlera e paracaktuar. trashëgojnë mund të jetë një vlerë e pestë, por çuditërisht nuk mbështetet Internet Explorer. Rivendosja vetëm e mbështjelljes majtas ose djathtas është mjaft e rrallë, por ka një përfitim praktik.

kolapsi i madh

Një gjë për të punuar noton i çuditshëm është efekti që kjo veti ka tek elementët prindër. Nëse elementi mëmë nuk përmban elementë të tjerë përveç një elementi lundrues, atëherë lartësia e tij fjalë për fjalë shembet. Kjo nuk është gjithmonë e dukshme, veçanërisht nëse elementi prind nuk ka një sfond të spikatur, por është e rëndësishme ta mbani parasysh këtë.

Por alternativa e një kolapsi të tillë është edhe më e keqe. Merrni parasysh skenarin e mëposhtëm:

Nëse blloku i sipërm zgjerohet automatikisht për të akomoduar elementin lundrues, atëherë do të kemi një ndërprerje në rrjedhën e tekstit midis paragrafëve, pa asnjë mënyrë për ta rregulluar atë. Nëse do të ishte kështu, atëherë zhvilluesit do të ankoheshin shumë më tepër për këtë sjellje të blloqeve lundruese sesa tani për kolapsin.

Kolapsi duhet mbajtur gjithmonë parasysh për të parandaluar sjelljen e çuditshme të paraqitjes dhe problemet e ndër-shfletuesve. Ne mund ta zgjidhim këtë problem duke përdorur qartë pas elementit lundrues në enë, por përpara se ena të mbyllet.

Teknikat e zhbërjes së mbështjelljes

Nëse jeni në një situatë ku e dini se ku do të jetë elementi tjetër, mund të përdorni clear:të dyja dhe të shkoni në biznesin tuaj. Ky është opsioni i përsosur pasi nuk kërkon ndonjë hak apo shtesë. Por për fat të keq, zakonisht jo gjithçka shkon siç duam, dhe në këtë rast, mund të përdorni mjetet e mëposhtme.

Metoda e bllokut bosh.

Është fjalë për fjalë një bllok bosh.

. Ndonjëherë mund të gjesh një element
ose ndonjë element tjetër të rastësishëm, por div është më i zakonshmi sepse nuk ka stil të paracaktuar të shfletuesit, nuk ka funksion të veçantë dhe nuk ka gjasa të jetë në stilin e zakonshëm CSS. Kjo metodë refuzohet nga puristët semantikë sepse prania e saj nuk ka asnjë kuptim kontekstual në faqe dhe është aty vetëm për paraqitje. Sigurisht, në kuptimin e ngushtë kanë të drejtë, por ai bën punën e tij dhe nuk i bën keq askujt.

metoda e tejmbushjes.

Bazuar në specifikimet e pronës CSS vërshoj për elementin prind. Nëse kjo veti është caktuar në auto ose i fshehur për një element prind, ai do të zgjerohet pas elementit lundrues, duke rivendosur në mënyrë efektive rrjedhën për elementët pasues. Kjo metodë mund të jetë e bukur semantikisht pasi nuk kërkon elemente shtesë. Megjithatë, siç mund ta shihni, ne kemi shtuar një të re div për të përdorur këtë metodë, e cila është e barabartë me përdorimin e një blloku bosh josemantik dhe më pak fleksibël. Duhet mbajtur mend gjithashtu se prona vërshoj Nuk ka për qëllim të mbyllë rrjedhën. Kini kujdes që të mos fshehni aksidentalisht përmbajtjen ose të mos shkaktoni shirita të padëshiruar të lëvizjes.

Metoda e pastrimit të lehtë.

Përdor pseudo-zgjedhësin CSS (:pas ) për të hequr mbështjelljen. Në vend që të përdorni një pronë vërshoj për elementin prind, vendosni një klasë shtesë për të, si "clearfix" dhe përdorni stilin e mëposhtëm CSS:

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

Kjo përdor një pjesë të vogël përmbajtjeje të fshehur nga pamja, e vendosur pas elementit prind, i cili rivendos mbështjelljen. Kjo metodë nuk është e plotë, pasi duhet përmirësuar për të mbështetur shfletuesit më të vjetër.

Situata të ndryshme kërkojnë metoda të ndryshme për mbështjellje. Le të marrim një rrjet të llojeve të ndryshme të blloqeve si shembull.

Për një bashkim më të mirë vizual të blloqeve të ngjashme, duhet të fillojmë një linjë të re kur ngjyra ndryshon. Ne mund të përdorim metodën e tejmbushjes ose të qartësisë së dritës nëse çdo grup ngjyrash ka një element prind. Ose përdorni metodën e bllokut bosh midis grupeve. Tre kuti prindërore që nuk ekzistonin më parë, ose tre kuti boshe që nuk ekzistonin më parë. Varet nga ju që të vendosni se cila metodë është më e mira.

Probleme me elementët lundrues

Elementet lundrues shpesh qortohen për shkak të brishtësisë së tyre. Pjesa më e madhe e kësaj brishtësie vjen nga IE6 dhe ai mete të orientuara nga noti. Por ndërsa gjithnjë e më shumë zhvillues heqin mbështetjen për IE6, mund të mos mendoni për këtë, por për ata që kujdesen për pajtueshmërinë, këtu është një listë e shpejtë.

Pushdown, është një simptomë që elementi brenda kutisë së lundruar është më i gjerë se kutia e notuar (zakonisht kjo ndodh me imazhet). Shumica e shfletuesve do të japin pjesën e dalë nga elementi lundrues, por kjo nuk do të ndikojë në paraqitjen. IE do të zgjerojë kutinë lundruese dhe shpesh kjo do të ketë një efekt drastik në paraqitjen. Një shembull tipik është një imazh që del jashtë bllokut kryesor të përmbajtjes, duke e shtyrë shiritin anësor poshtë.

Zgjidhja e shpejtë e problemeve: përdor tejmbushjen: i fshehur; për të prerë tepricën.

Gabim me marzh të dyfishtëështë një tjetër gjë që duhet mbajtur parasysh kur punoni me IE6. Ky bug shprehet në faktin se nëse fusha është në të njëjtën anë ku është e orientuar noton, fusha është dyfishuar. Për shembull:

Ne do të marrim diferencën e majtë 40 px., në vend të 20 px.

Zgjidhja e shpejtë e problemeve: vendosni ekranin: inline për bllokun lundrues dhe mos u shqetësoni se elementi do të qëndrojë në nivelin e bllokut.

3px Jog. Thelbi i këtij gabimi është se teksti i vendosur pranë elementit lundrues zhvendoset çuditërisht me tre piksel, sikur nën ndikimin e një fushe force të vendosur rreth elementit lundrues. Zgjidhja e shpejtë e problemeve: vendosni gjerësinë dhe lartësinë e tekstit të prekur.

Shfaqet në IE7 Gabim i kufirit të poshtëm kur elementi prind është një element lundrues dhe fëmija i tij brenda tij është gjithashtu një element lundrues. Marzhi i poshtëm (margin-fund) i fëmijës injorohet nga elementi prind. Zgjidhja e shpejtë e problemeve: Përdorni margjinën e poshtme ( padding-bottom ) në elementin prind, në vend të mbushjes së poshtme (margin-bottom ) në elementin fëmijë.

Le të shohim se çfarë ndodh me elementët kur vetia float zbatohet për ta:

• Elementi "lundron" dhe qëndron kundër skajit të majtë (nëse noton: majtas) ose djathtas (float: djathtas) të elementit prind ose një elementi që është vendosur gjithashtu të noton
• Nëse një element nuk mund të përshtatet në të njëjtin rresht me një element tjetër për shkak të gjerësisë së bllokut prind, ai do të zhvendoset poshtë derisa të ketë hapësirë ​​të mjaftueshme për të.
• Elementët e tjerë të bllokut që nuk kanë vlerë float sillen sikur elementi me float nuk është në faqe (elementi është "float"). Linjat "e dinë" se elementi ka lundruar dhe rrjedhin rreth tij
• Gjerësia e bllokut të vendosur në notim përcaktohet nga përmbajtja.

Konsideroni një shembull. Çkomentoni float: pronën e majtë brenda CSS. Shikoni rezultatin.

Zëvendësoni float: majtas me float: djathtas.

Vetia float është e dobishme për mbështjelljen e imazheve rreth tekstit. Konsideroni një shembull:

Shtoni një koment në linjën e skedarit CSS te vetia float: left. Shihni se si do të ndryshojë faqosja e faqes. Zëvendëso float: majtas me notues: djathtas.

"Kapëzimi" i elementit prind kur shfaqet "fëmija".

Le të vendoset elementi dy brenda një elementi. Si parazgjedhje, lartësia do të shtrihet për t'iu përshtatur përmbajtjes. Sapo të notojmë dy elementët, ai noton dhe elementi i një prind nuk do ta dijë se ekzistojnë dy. Nëse dy nuk kanë përmbajtje, atëherë lartësia e tij është zero. Kjo sjellje quhet "kolaps". Për të parandaluar kolapsin e prindit, ose i vendoset vetia min-height - lartësia minimale, ose përdoret një metodë: shtohet një bllok tjetër, për të cilin është caktuar vetia:

1

Ky bllok nuk është i dukshëm në faqe, por vetia clear:both zbërthen elementet dhe e shtrin prindin në lartësinë e përmbajtjes.

Zhkomentoni veçorinë float:left në CSS. Shihni se si sillet elementi prind:

Konsideroni një shembull duke përdorur qartë: të dyja

Pra, ju jeni njohur me vetitë themelore të float. Le të zbatojmë njohuritë në praktikë.

Vraponi

Ushtrimi 1. Shtoni klasa në imazhe. Në klasa, specifikoni vetinë float:left. Shihni se si do të ndryshojë dalja e faqes.

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 rradhë, 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:

1. Ekziston një enë me dy blloqe ose më shumë.
2. Blloqet e brendshme kanë të vendosur pronat e tyre CSS float majtas ose djathtas.
3. 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 nga parametrat e vendosur në dukje të saktë, 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:

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 në përgjithësi nuk do të nevojitet, por një bllok me të qartë: të dyja veçoritë thjesht shkëputin përmbajtjen nga blloqet lundruese.

Shembull i kodit të faqes:

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 px; 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ë automatik, atëherë përgatituni për faktin se në disa situata mund të shfaqen ende shiritat e lëvizjes. 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ë float majtas dhe float djathtas CSS 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ë:

Të gjithë elementët që shfaqen në një faqe HTML nuk janë gjë tjetër veçse drejtkëndësha. Dhe në thelb vetëm dy lloje:

1. bllok (bllok), të cilat zënë të gjithë gjerësinë e vendit ku janë dhe ndahen nga ajo që është sipër dhe poshtë tyre. Për shembull, këto janë etiketat DIV, P, H.
2. i integruar (në linjë). Për shembull, SPAN, STRONG, EM, A dhe IMG.

tabelat.

Roli i pronës është rritur pas kalimit nga tabela-layout në div-layout. Kjo është për shkak se float lejon një zhvillues në internet të përfshijë kolona pa përdorur një tabelë. Mund të marrë vlera drejtë, majtas, por jo qendër.

Me ekranin: bllok; ose shfaqja: inline; ne po shndërrojmë një lloj drejtkëndëshi në një tjetër. Për shembull, një listë UL që ka një numër blloqesh LI mund të vendoset horizontalisht:

• PARAGRAF
• PARAGRAF
• PARAGRAF

• PARAGRAF
• PARAGRAF
• PARAGRAF

Kur përdorni veçorinë float, drejtkëndëshi është një drejtkëndësh bllok, por me një kthesë: gjerësia e tij nuk do të përfshijë të gjithë përmbajtjen. Për shembull, titulli h3 duket si ky:

ky është HEADER h3

Nëse e vendosni veçorinë e ekranit: inline; atëherë do të shohim që jo vetëm gjerësia ka ndryshuar, por edhe distanca mbi dhe poshtë elementit:

ky është HEADER h3

Por nëse dua ta pozicionoj elementin në të djathtë dhe të shtoj text-align:right; këtë herë, marrim:

ky është HEADER h3

Dhe krejt ndryshe nëse noton: drejtë;. Vini re se hapësira mbi dhe poshtë elementit mbetet e njëjtë:

ky është HEADER h3

Dhe si do të sillen elementët pranë titullit?

Teksti i sipërm mbetet i pandryshuar sepse elementi lundrues nuk mund të pozicionohet më lart se rreshti në të cilin është krijuar.

ky është HEADER h3

Por teksti i kuq është nën titull dhe do të rrjedhë rreth tij pa pasur ndonjë stil shtesë. Dhe sapo të kapërcehet lartësia h3, faqja do të kthehet në rendin e saj natyror.

A B C D Disa elementë lundrues do të ndjekin sekuencën e pozicionit të tyre.

PORBATG teksti...

Dhe shtrirja bëhet përgjatë skajit të poshtëm të atyre shkronjave që janë në të njëjtën anë.

A B C D Nëse duam që elementi të ndalojë rrjedhjen nga një pikë e caktuar (nga këtu), zbatohet vetia e qartë. Mund ta shtojmë në një etiketë boshe

Në mënyrë që të vendosen në mënyrë të barabartë disa bllok-drejtkëndësha, jepuni atyre të njëjtën gjerësi.

Ku është hapësira ndërmjet blloqeve? Nëse vendoset, atëherë për shkak se elementët lundrues nuk do të kenë hapësirë ​​të mjaftueshme, ata do të lëvizin poshtë.
Çështja zgjidhet duke shtuar një DIV tjetër:

Paraqitja e tabelave është shumë e përshtatshme dhe e kuptueshme, kjo është ndoshta arsyeja pse u shfaq shfaqja e saj analoge: tabela; E njëjta formë fitohet me më pak kod.

, ku hapësira kufitare specifikon hapësirën horizontale dhe vertikale midis kufijve të qelizave.

Tani mund të shihni se si është ndërtuar galeria e imazheve. Shpresoj që askush të mos ketë harruar.

Lidhje me burimet:

Float është një veti CSS për pozicionimin e elementeve. Për të kuptuar qëllimin dhe origjinën e tij, mund t'i drejtoheni dizajnit të printimit. Në paraqitjen e printimit, imazhet mund të pozicionohen në faqe në mënyrë që teksti t'i "mbështjellë" ato. Kjo zakonisht quhet "mbështjellje teksti".

Në programet e paraqitjes së faqeve, elementët me tekst mund të përfshijnë ose jo imazhe. Nëse ato shpërfillen, teksti do të shfaqet sipër fotove sikur të mos ishin aty. Ky është ndryshimi kryesor nëse imazhet janë pjesë e rrjedhës kryesore të faqes apo jo. Dizajni i uebit është shumë i ngjashëm.

Në dizajnin e uebit, elementët e faqeve të vendosur për të lëvizur sillen tamam si imazhet në printim kur teksti mbështillet rreth tyre. Elementë të tillë janë pjesë e rrjedhës kryesore të faqes së internetit. Sidoqoftë, gjërat ndryshojnë nëse elementët përdorin pozicionim absolut. Elementet e pozicionuar absolutisht hiqen nga rrjedha kryesore e faqes, ngjashëm me shembullin e mësipërm ku teksti injoron imazhet në tipografi. Elementë të tillë nuk ndikojnë në pozicionin e elementeve të tjerë, qofshin ato prekje apo jo.

Vendosja e vetive float është si më poshtë:

#bari anësor (float: djathtas; )

Janë 4 vlera në total për pronën float. Majtas dhe djathtas përdoren për drejtimet përkatëse. Asnjë (e parazgjedhur) - siguron që elementi të mos "lundrojë". Dhe inherit , që thotë se sjellja duhet të jetë e njëjtë me elementin prind.

Për çfarë mund të përdoret float?

Përveç mbështjelljes së tekstit rreth imazheve, notat mund të përdoren për të krijuar paraqitjen e një faqeje të tërë.

Vetia float është gjithashtu e dobishme në një shkallë më të vogël. Për shembull, merrni parasysh një zonë të vogël në një faqe interneti. Le të themi se përdorni një notues për avatarin, kur ndryshoni madhësinë e imazhit, teksti do të ndryshojë përmasat për t'iu përshtatur imazhit.

I njëjti rregullim i objekteve mund të arrihet duke përdorur pozicionimin. Objektit të kontejnerit i caktohet pozicionimi relativ (relativ), dhe objekti i imazhit - absolut (absolut). Në këtë rast, avatari nuk do të ndikojë në pozicionin e tekstit.

Anulimi i pronës së lundrimit

Për float, prona e lidhur është e qartë. Çdo element që ka grupin e tij të qartë të vetive nuk do të ngjitet në krye siç pritej, por do të shfaqet poshtë elementeve float. Ndoshta një shembull në një foto do të shpjegojë më mirë se fjalët.

Në shembull, shiriti anësor është vendosur në të djathtë (float: djathtas;) dhe lartësia e tij është më e vogël se zona kryesore e përmbajtjes. Pra, futeri do të ngrihet më lart sepse ka lartësi të mjaftueshme dhe sjellja notuese e kërkon këtë. Për të korrigjuar situatën, ai duhet të vendosë veçorinë e qartë, e cila siguron që elementi të jepet nën elementët float.

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

Vetia e qartë mund të marrë katër vlera. Të dyja, më të përdorurat, përdoren për të anuluar notimin e secilit prej drejtimeve. Majtas dhe djathtas përdoren për të anuluar notimin e njërit prej drejtimeve. Asnjë - parazgjedhja, zakonisht nuk përdoret, përveç rasteve kur është e nevojshme të anashkalohet vlera e qartë . Vlera e trashëguar do të ishte vlera e pestë, por çuditërisht nuk mbështetet në Internet Explorer. Kthimi vetëm i notit majtas ose djathtas është shumë më pak i zakonshëm, por sigurisht që ka përdorimet e veta.

shembje e madhe

Një tjetër gjë e mahnitshme në lidhje me pronën float është se përdorimi i saj mund të ndikojë në elementin prind. Nëse një element i tillë përmban vetëm elementë notues, atëherë ai fjalë për fjalë shembet, domethënë lartësia e tij është zero. Kjo nuk është gjithmonë e dukshme nëse elementi prind nuk ka ndonjë grup të dukshëm të sfondit.

Një kolaps i tillë duket i palogjikshëm, por alternativa është edhe më e keqe. Merrni parasysh këtë shembull:

Nëse elementi i nivelit të bllokut në krye rritet automatikisht për t'iu përshtatur të gjithë elementëve float, do të përfundojmë me një ndërprerje të panatyrshme në tekst midis paragrafëve, pa asnjë mënyrë për ta rregulluar atë. Nëse do të ishte kështu, dizajnerët tanë do të ankoheshin shumë më tepër për këtë sjellje sesa për kolapsin.

Kështu, kolapsi është pothuajse gjithmonë i nevojshëm për të parandaluar vështirësitë e paraqitjes. Për të ndryshuar këtë sjellje, duhet të shtoni një element që anulon float pas elementeve float, por përpara se elementi prind të mbyllet.

Mënyrat për të anuluar një notim

Nëse e dini se ndonjë element tjetër (për shembull, një fund) do të shfaqet gjithmonë pas elementeve float, atëherë ju vetëm duhet të vendosni të qartë vetinë: të dyja; , si në shembullin e mësipërm, dhe shkoni për biznesin tuaj. Kjo është ideale pasi nuk kërkon ndonjë hak apo shtesë. Sigurisht, jo gjithçka në jetën tonë është kaq e qetë dhe ka raste kur kjo metodë nuk është e mjaftueshme. Prandaj, është e nevojshme të keni disa metoda shtesë në arsenalin tuaj.

• Metoda e ndarjes së zbrazët. Ai përdor, fjalë për fjalë, një div bosh.
  . Ndonjëherë një element mund të përdoret në vend të tij
  ose diçka tjetër, por div është më i përdoruri sepse nuk ka stil si parazgjedhje, nuk ka qëllim të veçantë dhe nuk ka gjasa të ketë një stil të përgjithshëm CSS të aplikuar për të. Kjo metodë mund të mos u tërheqë atyre që pëlqejnë shënimin e pastër semantikisht, pasi prania e një div boshe nuk ka kuptim kontekstual dhe vendoset në faqe vetëm për arsye dizajni. Sigurisht, në mënyrë rigoroze, kanë të drejtë, por ai bën punën e tij dhe nuk i bën keq askujt.
• metoda e tejmbushjes. Bazuar në faktin se elementi prind duhet të vendosë vetinë e tejmbushjes. Nëse kjo veti është vendosur në automatik ose e fshehur, atëherë elementi prind do të zgjerohet për të përmbajtur të gjithë elementët float. Kjo metodë duket më e saktë semantikisht sepse nuk kërkon elemente shtesë. Megjithatë, nëse do të përdorni një div tjetër vetëm për të përdorur këtë qasje (që do të thotë div mëmë), atëherë do të jetë njësoj si shembulli i mëparshëm me një div bosh të shtuar. Gjithashtu, mbani mend se prona e tejmbushjes është për qëllime të tjera. Jini të kujdesshëm dhe mos lejoni që disa nga përmbajtjet tuaja të zhduken ose të shfaqen shiritat e panevojshëm të lëvizjes.
• Metoda e thjeshtë e pastrimit. Kjo metodë përdor pseudo përzgjedhësin e mrekullueshëm :after CSS. Shumë më mirë sesa përdorimi i tejmbushjes në elementin prind. Thjesht i jepni një klasë shtesë, të deklaruar kështu: .clearfix:after (përmbajtja: "."; dukshmëria: e fshehur; shfaqja: bllok; lartësia: 0; e qartë: të dyja; ) float . Dhe nga rruga, kjo nuk është e gjithë historia se si duhet të përdoret kodi shtesë në shfletuesit e vjetër.

Dhe, siç e kuptoni, secila prej metodave përdoret në situata të ndryshme. Merrni, për shembull, një rrjet elementësh blloku që ndryshojnë në lloje.

Për një paraqitje më të mirë vizuale, do të ishte mirë të kombinoheshin blloqe të ngjashme. Për shembull, ne duam që çdo lloj të fillojë në një linjë të re, në rastin tonë lloji i elementit përcaktohet nga ngjyra. Ne mund të përdorim metodën e tejmbushjes ose metodën e "pastrimit të thjeshtë" nëse secili grup ka elementin e tij të kontejnerit. Ose mund të përdorim metodën div boshe ndërmjet secilit prej grupeve. Tre elementë kontejnerë, ose tre div boshe, cilado që është më e mira për detyrën tuaj varet nga ju.

Probleme me notat

Njerëzit shpesh përpiqen të anashkalojnë Float, sepse ju duhet të punoni me ta me shumë kujdes. Shumica e gabimeve erdhën me IE6. Ndërsa gjithnjë e më shumë dizajnerë të uebit heqin mbështetjen për IE6, mund të mos keni nevojë të shqetësoheni për këto çështje. Por për ata që kujdesen, këtu është një listë e shkurtër.

alternativat notuese

Nëse keni nevojë për tekst për ta mbështjellë një imazh, nuk ka alternativa. Por për paraqitjen e faqeve, ka padyshim një zgjedhje. Ka qasje shumë interesante që kombinojnë fleksibilitetin e notave me fuqinë e pozicionimit absolut. CSS3 ka diçka që quhet Moduli i paraqitjes së shabllonit, e cila do të ofrojë një alternativë të mirë për të lundruar në të ardhmen.