Float la çfarë do të thotë. Gjithçka në lidhje me pronën lundruese

Përshkrim

Vetia float CSS ju lejon të bëni një element të notojë duke e lundruar në skajin e majtë ose të djathtë të elementit prind, në varësi të vlerës së vendosur. Nëse një element lundrues nuk është vendosur në mënyrë eksplicite në një gjerësi (gjerësi), atëherë ai zvogëlohet në gjerësi për t'iu përshtatur përmbajtjes.

Shfletuesi përpunon kodin e dokumentit HTML nga lart poshtë, kur përpunimi i kodit arrin një element lundrues, shfletuesi e vendos atë të parën sipas rrjedhës së dokumentit, d.m.th. poshtë elementit ku ndodhet në kodin e dokumentit, atëherë ai heq elementin lundrues nga rrjedha normale dhe e zhvendos atë sa më shumë që të jetë e mundur në skajin e majtë ose të djathtë të elementit mëmë:

Meqenëse elementi lundrues është hequr nga rrjedha e dokumentit, pjesa tjetër e elementeve të nivelit të bllokut që e ndjekin atë në kod zhvendosen në vend sikur elementi të mos ekzistonte kurrë.

Edhe pse elementi lundrues është hequr nga rrjedha normale, përmbajtja inline është ende e prekur. Ndryshe nga elementët e bllokut, përmbajtja inline e vendosur në kod pas një elementi lundrues merr parasysh kufijtë e tij dhe rrjedh rreth tij, domethënë teksti mbështillet rreth bllokut lundrues:

Në vend të një blloku lundrues me përmbajtje teksti, mund të bëni një imazh lundrues. Në këtë rast, teksti do të përfundojë rreth imazhit:

ME duke përdorur CSS karakteristikat float imazhi është bërë lundrues në anën e majtë. Teksti poshtë imazhit në kodin HTML do të mbështillet rreth imazhit në anën e djathtë dhe të poshtme.

Më shumë se një element lundrues mund të vendoset në të njëjtin rresht, nëse gjerësia e elementit prind e lejon. Nëse elementi mëmë nuk është mjaft i gjerë, atëherë elementët lundrues që nuk përshtaten në linjë me pjesën tjetër të elementeve lundrues do të shtyhen poshtë.

Elementet lundrues nuk ndikojnë në lartësinë e prindit, domethënë nëse ka një enë, dhe në të ka vetëm elementë lundrues, atëherë lartësia e enës do të jetë zero. Ju mund ta zgjidhni këtë problem në mënyrat e mëposhtme:

1. Vendosni një lartësi fikse - në rastet kur e dini se cila duhet të jetë lartësia e enës.
2. Aplikoni një veçori të tejmbushjes së auto ose të fshehur në kontejner, atëherë elementët lundrues do të merren parasysh gjatë llogaritjes së lartësisë së kontejnerit. Kjo metodë mund të përdoret kur nuk dihet paraprakisht se cila duhet të jetë lartësia e enës.

Vetia float funksionon vetëm në elementet e bllokut, kështu që nëse vetia float aplikohet në elementë të një lloji tjetër, ato konvertohen në llojin e bllokut.

Shënim: Elementet e pozicionuar absolut dhe fiks e injorojnë vetinë float. Gjithashtu vetia float nuk ka asnjë efekt në flexboxet.

Formatimi i tabelave në kaskadë). Kjo gjuhë ekziston që nga viti 1996 dhe ende vazhdon të zhvillohet. Për momentin, zhvilluesit tashmë po përdorin versionin e tretë të CSS. Duke përdorur gjuhën e programimit CSS, është e mundur të krijoni një faqe krejtësisht të bukur dhe të këndshme që nuk do të duket e vjetëruar ose e papërshtatshme për përdoruesit, edhe nëse JavaScript nuk përdoret fare. Karakteristikat moderne të versionit të tretë ju lejojnë ta bëni këtë.

Gjithashtu, zhvilluesit mund të përdorin opsione më të përshtatshme formatimi, të tilla si Flexbox ose Position për të ndryshuar vendin e një elementi në sajt, por së pari gjërat. Së pari, le të kuptojmë avantazhet dhe disavantazhet e pronës Float.

CSS Float - pse është e nevojshme?

Float - veti për pozicionimin e elementeve. Çdo ditë mund të shihet në faqet e gazetave dhe revistave, duke parë foto dhe tekste që i mbështjell me shumë kujdes. Në botën e kodeve HTML dhe CSS, kur përdorni funksionin Float, e njëjta gjë duhet të ndodhë. Por ia vlen të kujtojmë se redaktimi i imazhit nuk është gjithmonë qëllimi kryesor i këtij funksioni. Mund të përdoret për të krijuar një rregullim popullor të elementeve të faqes në dy, tre, katër kolona. Në fakt, vetia Float CSS vlen për pothuajse çdo element html. Duke ditur bazat e redaktimit të renditjes së elementeve duke përdorur funksionin Float, dhe më pas Property, nuk do të jetë e vështirë të krijoni ndonjë dizajn siti.

Programet e veçanta të paraqitjes ndonjëherë mund të mos i vënë re imazhet, por t'i kalojnë ato. Gjëra mjaft të ngjashme ndodhin në dizajnin e uebit, vetëm duke marrë parasysh që teksti, në vend që të ngjitet në imazh, shfaqet (nëse vetia Float zbatohet gabimisht) pranë tij ose poshtë tij, por gjithmonë jo aty ku i duhet zhvilluesit.

Përshkrimi i pronës CSS Float

Në fakt, aftësia për të përdorur pronën Float është një ACE shumë e mirë në mëngë për çdo projektues ueb. Por, për fat të keq, mungesa e të kuptuarit se si funksionon kjo veçori mund të çojë në përplasje të elementeve të faqes dhe zhgënjime të tjera të këtij lloji. Më parë, situata të ngjashme kanë ndodhur gjithashtu për shkak të gabimeve në shfletues. Tani do të zbulohet sekreti se si të përdorni siç duhet pronën Float dhe nuk duhet të ketë më probleme me këtë.

Prona Float ka katër vlera:

• float:trashëgoj;
• float:djathtas;
• float:majtas;
• float:asnjë;

Për ata që dinë anglisht, vlerat e parametrave të pronës Float duhet të jenë të qarta. Por për ata që nuk e dinë, ja një shpjegim të vogël. Parametri :majtas; lëviz trupin e elementit në këndin më të majtë të elementit mëmë. E njëjta gjë ndodh (vetëm në drejtimin tjetër) me parametrin bcgjkmpjdfybb : drejtë;. Kuptimi :trashëgoj; i thotë elementit të marrë të njëjtat cilësime si prindi i tij. Elementë të tillë quhen edhe elementë fëmijë, pasi ato ndodhen direkt brenda elementit prind në kodin html. Një pronë :asnje; lejon që elementi të mos prishë rrjedhën normale të dokumentit, ai është vendosur si parazgjedhje për të gjitha pjesët e kodit.

Si funksionon Float?

Vetia Float CSS funksionon mjaft thjesht. Gjithçka që u përshkrua më lart mund të bëhet pa shumë vështirësi. Atëherë gjithçka do të jetë po aq e thjeshtë. Por përpara se të vazhdoni me pronën Float, ia vlen të kuptoni pak teori. Çdo element i një faqe interneti është një bllok. Është e lehtë ta verifikosh këtë duke hapur konsolën Google Chrome duke shtypur Ctrl + Shift + J. Teksti, titulli, imazhi, lidhjet dhe të gjithë komponentët e tjerë të faqes do të shfaqen në blloqe, vetëm me madhësi të ndryshme. Fillimisht, të gjitha këto blloqe shkojnë njëri pas tjetrit. Siç mund ta shihni në shembullin e mëposhtëm, linjat e kodit ndjekin njëra-tjetrën, kështu që ato do të shfaqen në mënyrë strikte njëra pas tjetrës.

Kjo quhet rrjedhje normale. Me një rrjedhë të tillë, të gjitha blloqet shtrihen mbi njëri-tjetrin (pa kryqëzuar trupat e elementeve) vertikalisht. Fillimisht, e gjithë përmbajtja e faqes në internet vendoset në këtë mënyrë. Por kur përdorni, për shembull, veçorinë e gjuhës Float Left CSS, elementi lë pozicionin e tij natyror në faqe dhe lëviz në pozicionin më të majtë. Një sjellje e tillë çon në mënyrë të pashmangshme në një përplasje me ato elemente që kanë mbetur në rrjedhën normale.

Me fjalë të tjera, elementët, në vend që të vendosen vertikalisht, tani janë pranë njëri-tjetrit. Nëse elementi prind ka hapësirë ​​të mjaftueshme që të mund të vendosë dy fëmijë brenda vetes, atëherë nuk ka përplasje, por nëse jo, atëherë imponimi i një objekti mbi tjetrin është i pashmangshëm. Kjo është jashtëzakonisht e rëndësishme të mbahet mend për të kuptuar se si funksionon vetia CSS Float.

Funksioni i qartë për zgjidhjen e problemeve

Funksioni Float ka një mik zemre - Qartë. Së bashku ata - Të dyja këto veçori plotësojnë njëra-tjetrën dhe e bëjnë zhvilluesin të lumtur. Siç u tha më lart, elementët ngjitur largohen nga rrjedha e tyre normale dhe gjithashtu fillojnë të "notojnë", ashtu si elementi që është lundruar (p.sh. CSS Float Top). Si rezultat, në vend të një elementi lundrues, fitohen dy, dhe aspak në vendin ku zhvilluesi synonte t'i vendoste ato. Nga ai moment fillojnë të gjitha problemet.

Funksioni Clear ka pesë vlera:

• :majtas;
• : drejtë;
• :të dyja;
• :trashëgoj;
• asnje;

Për analogji, ju mund të kuptoni se kur është më mirë të përdorni funksionin Clear. Nëse kemi një rresht në kod float:djathtas;(është menduar kodi CSS), atëherë funksioni duhet të jetë qartë: e drejtë;. Të njëjtat lëkundje dhe veti float:majtas; do ta plotësojë atë qartë: majtas;. Kur shkruani kodin qartë: të dyja; rezulton se elementi për të cilin aplikohet ky funksion do të jetë nën elementët në të cilët aplikohet funksioni Float. Trashëgimi merr cilësimet nga elementi prind dhe asnjëri nuk bën asnjë ndryshim në strukturën e faqes. Nëse e kuptoni se si funksionojnë funksionet Float dhe Clear, mund të shkruani kod unik dhe të pazakontë HTML dhe CSS Float që do ta bëjë uebsajtin tuaj të veçantë.

Përdorimi i Float për të krijuar kolona

Vetia Float është veçanërisht e dobishme kur krijoni kolona në një sajt (ose poziciononi përmbajtjen e CSS Float në qendër të një faqe interneti). Është ky kod që është më praktiki dhe më i përshtatshëm, kështu që ia vlen të merren parasysh disa opsione për krijimin e një modeli të njohur të faqes në internet me dy kolona. Për shembull, le të marrim një faqe interneti standarde me përmbajtje në të majtë, një shirit navigimi në të djathtë, një kokë dhe një fund. Kodi do të jetë si ky:

Tani duhet të kuptojmë se çfarë është shkruar këtu. Elementi prind, i cili përmban trupin kryesor të kodit html, quhet kontejner. Kjo ju lejon të parandaloni që elementët, tek të cilët aplikohet funksioni Float, të shpërndahen në drejtime të ndryshme. Nëse nuk do të ishte aty, atëherë këta elementë do të fluturonin deri në kufijtë e shfletuesit.

Më pas, në kod ka #content dhe #navigation. Funksioni Float zbatohet për këta elementë. #përmbajtja shkon në të majtë dhe #navigimi shkon në të djathtë. Kjo është e nevojshme për të krijuar një faqe me dy kolona. Sigurohuni që të specifikoni gjerësinë në mënyrë që objektet të mos mbivendosen me njëri-tjetrin. Gjerësia gjithashtu mund të specifikohet si përqindje. Është edhe më i përshtatshëm se në pixel. Për shembull, 45% për #content dhe 45% për #navigation, dhe 10% jepni pronës së marzhit.

Vetia Clear, e cila është në #footer, e pengon footer-in të ndjekë #navigimin dhe #content, por e lë pikërisht aty ku ishte. Çfarë mund të ndodhë? nëse nuk e specifikoni pronën Clear? Në këtë kod, #footer thjesht do të ngjitet dhe do të jetë nën #navigacion. Kjo do të ndodhë sepse #navigimi ka hapësirë ​​të mjaftueshme për të akomoduar një element më shumë. Ky shembull ilustrues tregon shumë qartë se si vetitë Clear dhe Float plotësojnë njëra-tjetrën.

Probleme që mund të hasen gjatë shkrimit të kodit

Shembujt e mësipërm janë mjaft të thjeshtë. Por ato mund të jenë edhe problematike. Në përgjithësi, në fakt, shumë telashe të papritura mund të ndodhin me funksionin Float. Sado e çuditshme mund të duket, por problemet zakonisht lindin jo me CSS, por me kodin html. Vendi ku ndodhet elementi me funksionin Float në kodin html ndikon drejtpërdrejt në funksionimin e këtij të fundit. Për të shmangur lloje të ndryshme vështirësish, është mirë të ndiqni një rregull të thjeshtë - të vendosni elementët me funksionin Float së pari në kod. Kjo pothuajse gjithmonë funksionon dhe minimizon sjelljen e tyre të papritur.

Përplasja e elementeve

Përplasjet ndodhin kur një element prind që përmban shumë fëmijë nuk mund t'i strehojë të gjithë dhe ato mbivendosen. Madje ndodh që elementet mund të mos shfaqen, por të zhduken nga faqja. Ky nuk është një gabim i shfletuesit, por sjellja e pritshme dhe e duhur e elementeve me funksionin Float.

Për shkak të faktit se këta elementë janë fillimisht në rrjedhën normale, dhe më pas shkelet nga vetia Float, shfletuesi mund t'i heqë ato nga faqja e faqes. Sidoqoftë, mos e humbni shpresën, sepse zgjidhja është e thjeshtë dhe e qartë - përdorni veçorinë Cear. Ndoshta nga të gjitha mënyrat për të dalë nga ky problem, Clear është më efektive.

Por problemi i përplasjes së elementeve të një faqe interneti mund të zgjidhet në një mënyrë tjetër. Ka të paktën dy mënyra të tjera:

• duke përdorur funksionin Pozicioni;
• Aplikacioni Flexbox.

Funksioni Position është ndonjëherë një alternativë e mirë për CSS Float. Në qendër të faqes së internetit në rastin e përdorimit të Position, është më mirë të poziciononi imazhet. Nëse aplikoni saktë vlerat :absolute dhe :relative, atëherë elementët do të bien në vend dhe nuk do të mbivendosen.

Analiza e kodit të funksionit Position dhe Float

Vlen të kuptohet më në detaje se si të zëvendësohet Float me Pozicionin në kodin HTML dhe CSS. Në fakt është shumë e thjeshtë. Le të themi se ka një #container dhe një element #div.

Në këtë shembull, përdorimi i funksionit (CSS Div) Float në kontejnerin e dytë do të ndihmojë në krijimin e një uebsajti standard me dy kolona. Mos harroni kurrë funksionin Clear. Pa të, do të dalë vetëm mbivendosja e elementeve mbi njëri-tjetrin.

Pra, si ta ndryshoni kodin CSS dhe Float për të përdorur Postion? Shume e thjeshte:

pozicioni: i afërm;

pozicioni: i afërm;

Në këtë rast, #container dhe #div do të zënë pozicionin në elementin prind që i nevojitet zhvilluesit. Kryesorja? vendosni #div dhe #container në të njëjtin element prind që do të përputhet me madhësitë e tyre.

Flexbox - si mund të zëvendësojë kjo veçori CSS Float?

Flexbox është mënyra më e avancuar për të krijuar faqe interneti për momentin, kështu që kjo veçori nuk mbështetet nga shfletuesit më të vjetër. Ky fakt nuk duhet të zbritet, sepse përdoruesit me versione të vjetëruara të shfletuesve nuk do të jenë në gjendje të shohin versionin e saktë të faqes.

Flexbox nuk është një pronë, por një modul i veçantë. Prandaj, flexbox mbështet një numër karakteristikash që funksionojnë vetëm me të. Për më tepër, funksioni i ekranit, i cili ka tre parametra inline, bllok dhe blloqe inline, ka vetëm një rrjedhje fleksibile të mbetur në flexbox.

Si funksionon Flexbox?

Kjo teknologji do të ndihmojë zhvilluesin të rreshtojë me lehtësi elementët horizontalisht dhe vertikalisht. Flexbox gjithashtu mund të ndryshojë drejtimin dhe rendin në të cilin shfaqen artikujt. Kjo teknologji ka dy akse: Aksi kryesor dhe aksi kryq, rreth të cilit është ndërtuar i gjithë Flexbox. Ai gjithashtu heq efektin e funksioneve Float dhe Clear. Ai e ndërton sistemin e tij në kod, në të cilin përdor vetitë që janë unike për të, kështu që, për fat të keq, nuk do të jetë e mundur të kopjohen vetitë e tjera, si Float dhe Position, në elementë. Dhe kjo do të ishte shumë e dobishme, sepse, siç u përmend më lart, Flexbox funksionon vetëm në versionet e reja të shfletuesve.

Vlen të kujtohet se në fund, Position, Flexbox dhe Float bëjnë të njëjtën gjë - ata krijojnë një dizajn të pazakontë dhe origjinal për faqen tuaj. Secila prej opsioneve të diskutuara në artikull e bën këtë në mënyrën e vet dhe për këtë arsye ka avantazhe dhe disavantazhe. Për më tepër, ndodh që diku funksioni Float është i përsosur (për shembull, në një faqe me një strukturë të thjeshtë), por diku është më mirë të përdorni Position ose Flexbox.

Bug me marzh të dyfishtë

Sidoqoftë, ndonjëherë, për fat të keq, secili zhvillues ka probleme që lidhen jo me kodin e shkruar, por me gabime në një lloj të veçantë shfletuesi. Për shembull, në Internet Explorer Ekziston një gabim i quajtur Bug me Marzh të Dyfishtë. Ai shumëzon me dy parametrin Margin, gjë që bën që elementët e faqes të lëvizin përtej kufijve të shfletuesit. Për të shmangur këtë, mjafton të specifikoni parametrin Margin si përqindje. Zakonisht ky gabim ndodh kur vlerat e vetive Margin dhe Float janë të njëjta.

margjina-majtas:10px;

Kjo do të lëvizë elementin 20px në të majtë në Internet Explorer. Ju mund ta ndryshoni kodin si kjo:

marzh-majtas:10%;

ose keshtu,

margin-djathtas:10px;

Të dyja këto opsione do të zgjidhin problemin e zhvendosjes së elementeve.

Gabimet e shfletuesit dhe shfaqja e gabuar e faqes

Vlen të kujtohet se Internet Explorer nuk është i vetmi shfletues në të cilin mund të ndodhin gabime. e vjetër Versionet e Google Chrome dhe Mozilla gjithashtu paraqesin gabimisht disa elementë të faqeve moderne të internetit. Për secilin prej këtyre gabimeve, mund të gjendet një zgjidhje. Në përgjithësi, dua të vërej se përdorimi i Float do të krijojë një origjinal dhe dizajn tërheqës faqe. Kuptimi i bazave dhe parimeve të kësaj veçorie do të ndihmojë në shmangien e gabimeve dhe do ta bëjë jetën më të lehtë për çdo zhvillues.

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 ndodhen 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 ekran: 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

ky është HEADER h3

ky është HEADER h3

ky është HEADER h3

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.

ABNËG teksti...

A B C D një moment të caktuar(nga këtu) zbatohet vetia e qartë. Mund ta shtojmë në një etiketë boshe

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

Paraqitja tabelare është shumë e përshtatshme dhe e kuptueshme, kjo është ndoshta arsyeja pse u shfaq ekrani i tij analog: tabela; E njëjta formë fitohet me më pak kod.

Tani mund të shihni se si është ndërtuar galeria e imazheve. Shpresoj se askush nuk ka harruar.

teksti...

teksti...

Përcakton se në cilën anë do të rreshtohet elementi, me elementë të tjerë që mbështillen rreth tij në anët e tjera. Kur vlera e vetive float është none, elementi paraqitet në faqe si normal, duke lejuar që një rresht i tekstit të mbështjelljes të jetë në të njëjtën linjë me vetë elementin.

informacion të shkurtër

Sintaksë

noton: majtas | drejtë | asnje

Shënimi

	Përshkrim	Shembull
<тип>	Përcakton llojin e vlerës.	<размер>
A&&B	Vlerat duhet të dalin në rendin e specifikuar.	<размер> && <цвет>
A | B	Tregon që vetëm një nga vlerat e sugjeruara (A ose B) duhet të zgjidhet.	normale | kapele të vogla
A || B	Çdo vlerë mund të përdoret më vete ose në kombinim me të tjerat në çdo mënyrë.	gjerësia || numëroj
	Vlerat e grupeve.	[ kulture || kryq]
*	Përsëriteni zero ose më shumë herë.	[,<время>]*
+	Përsëriteni një ose më shumë herë.	<число>+
?	Lloji, fjala ose grupi i specifikuar është opsional.	futur?
(A, B)	Përsëriteni të paktën A, por jo më shumë se B herë.	<радиус>{1,4}
#	Përsëriteni një ose më shumë herë të ndara me presje.	<время>#

vlerat

majtas Rreshton elementin në të majtë dhe të gjithë elementët e tjerë, si teksti, e mbështjellin atë në të djathtë. djathtas Rreshton elementin në të djathtë dhe të gjithë elementët e tjerë e mbështjellin atë në të majtë. Asnjë Mbështjellja e elementit nuk është vendosur.

Sandbox

Winnie the Pooh nuk ishte gjithmonë kundër një pije freskuese, veçanërisht në orën njëmbëdhjetë të mëngjesit, sepse në atë kohë mëngjesi kishte mbaruar prej kohësh dhe darka as që kishte menduar të fillonte. Dhe, natyrisht, ai u gëzua jashtëzakonisht shumë kur pa që Lepuri nxori gota dhe pjata.

img ( noton: (( shesh lojërashVlera )) ;)

Shembull

Bihejviorizmi, pavarësisht sa paradoksal mund të duket, ndriçon një stimul të sublimuar, për shembull, Richard Bandler përdori një ndryshim në nënmodalitetet për të ndërtuar shtete efektive.

Rezultati i këtij shembulli është paraqitur në Fig. 1.

Oriz. 1. Përdorimi i vetive float

Modeli i objektit

Nje objekt.style.cssFloat

shënim

Internet Explorer 6 ka një gabim me dyfishimin e vlerës së mbushjes majtas ose djathtas për elementët lundrues të vendosur brenda elementëve prindër. Mbushja që është ngjitur me anën e prindit dyfishohet. Problemi zakonisht zgjidhet duke shtuar ekran: inline në elementin lundrues. Ky shfletues shton gjithashtu një mbushje 3 pikselë (i ashtuquajturi "bug me tre piksel") në drejtimin e specifikuar nga vlera float.

Specifikim

Çdo specifikim kalon nëpër disa faza të miratimit.

• Rekomandim (Rekomandim) - specifikimi është miratuar nga W3C dhe rekomandohet si standard.
• Rekomandimi i Kandidatit ( Rekomandim i mundshëm) - grupi përgjegjës për standardin është i kënaqur që ai përmbush qëllimet e tij, por kërkohet mbështetja e komunitetit të zhvillimit për zbatimin e standardit.
• Rekomandimi i propozuar ( Rekomandim i sugjeruar) - në këtë fazë, dokumenti i dorëzohet Bordit Këshillimor të W3C për miratim përfundimtar.
• Drafti Punues - Një draft më i pjekur pas diskutimit dhe amendamenteve për shqyrtim nga komuniteti.
• Drafti i redaktorit ( Drafti editorial) është një draft version i standardit pasi janë bërë ndryshime nga redaktorët e projektit.
• draft ( Drafti i specifikimeve) është versioni i parë draft i standardit.

Shfletuesit

Shfletuesit

Shënimi i mëposhtëm përdoret në tabelën e shfletuesit.

Prona Float është një aset i rëndësishëm dhe i fuqishëm për zhvilluesit e uebit që punojnë me HTML dhe CSS. Nga ana tjetër, mund të jetë mjaft frustruese dhe konfuze nëse nuk e kuptoni plotësisht se si funksionon kjo veçori.

Përkthimi i artikullit CSS Floats 101. Origjinali alistapart.com

Gjithashtu, në të kaluarën, për shkak të gabimeve mjaft të këqija në shfletues, ishte normale të ishe nervoz kur përdorni pronën noton në grupet tuaja të rregullave CSS. Por le të qetësojmë nervat dhe të përpiqemi të zbusim zhgënjimin. Unë do t'ju tregoj saktësisht se çfarë bën prona float me elementët tuaj dhe si ta përdorni atë me lehtësi.

Ne shohim nota çdo ditë në botën e printimit kur shikojmë një artikull reviste me një imazh majtas ose djathtas dhe tekst të renditur bukur rreth tij. Në botën HTML/CSS, teksti do të mbështillet rreth një imazhi në varësi të vetive float që aplikohet në atë imazh. Përdorimi i vetive float në një imazh është vetëm një nga shembujt e shumtë. Si shembull tjetër, me veçorinë float, ne mund ta bëjmë shumë të lehtë paraqitjen popullore me dy kolona. Në fakt, ju mund të aplikoni veçorinë float në çdo element në HTML-në tuaj. Duke mësuar dhe kuptuar përdorimin e veçorisë float, së bashku me vetinë e pozicionit, do të jeni të rehatshëm dhe të sigurt kur krijoni ndonjë plan urbanistik.

përcaktimi i notit

Le të fillojmë duke përcaktuar se çfarë është noton.

Float është në mënyrë konvencionale një kuti që lëviz djathtas ose majtas përgjatë vijës aktuale. Karakteristika më interesante e një float është se përmbajtja mund të rrjedhë përgjatë anës së saj. Kur aplikohet float: majtas, përmbajtja do të mbështillet rreth kutisë në anën e djathtë, dhe po ashtu noton: djathtas do të rrjedhë poshtë në anën e majtë.

Vetia float ka 4 vlera që mund t'i përdorim: majtas, djathtas, inherint dhe asnjë. Çdo kuptim është mjaft i qartë. Për shembull, nëse notoni: majtas në një element, ai do të lëvizë në kufirin më të majtë të elementit të tij prind. Dhe, nëse vendosni float: djathtas, atëherë elementi në mënyrë të ngjashme do të lëvizë djathtas. Vlera ihnerit i thotë elementit të trashëgojë pronën nga elementi i tij mëmë. Dhe vlera e fundit "none" është vlera e paracaktuar dhe thotë të mos aplikohet vetia noton ndaj këtij elementi.

#container ( gjerësia: 960px; marzhi: 0 automatik; ) #content ( float: majtas; gjerësia: 660px; sfond: #fff; ) #navigacion ( float: djathtas; gjerësia: 300px; sfond: #eee; ) #footer ( qartë: të dyja; sfond: #aaa; mbushje: 10 px; )

#footeri ynë është ngecur poshtë bllokut të #navigimit. Kjo ndodhi sepse ka vend për #footer poshtë bllokut #navigation dhe kjo është sjellja e duhur për rrjedhën normale të bllokut. Por, kjo nuk është absolutisht ajo që na nevojitet, apo jo? Unë supozoj se ju tashmë e shihni marrëdhënien midis float dhe të qartë dhe kuptoni se si ato plotësojnë njëra-tjetrën.

Nëse keni një çrregullim obsesiv-maniak si unë, mund të keni vënë re në Shembullin F se kolonat #content dhe #navigation kanë lartësi të ndryshme; Ka disa mënyra për ta zgjidhur atë, por kjo është përtej qëllimit të këtij artikulli. Unë rekomandoj shumë të lexoni Kolonat Faux të Dan Cederholm për të mësuar se si të bëni blloqe me të njëjtën lartësi, pavarësisht nga përmbajtja brenda.

Fluturoni së pari

Deri tani kemi parë disa të bukura shembuj të thjeshtë që nuk krijojnë shumë dhimbje koke. Megjithatë, ka disa gracka që duhen pasur parasysh kur përdorni pronën float. Çuditërisht, një nga kurthet më të mëdha nuk lidhet me CSS, por më shumë me HTML. Vendosja e elementit tuaj të lundruar brenda HTML-së tuaj mund të ketë rezultate të ndryshme. Hidhini një sy shembullit H.

Këtu kemi një bllok të vogël që ka një imazh me një veçori float:right dhe tekst që e rrethon. CSS-ja jonë duket kështu:

#container ( gjerësia: 280 px; margjina: 0 automatik; mbushja: 10 px; sfondi: #aaa; kufiri: 1 px solid #999; ) img ( float: djathtas; )

Elementi ynë prind #container ka një gjerësi të ngushtë dhe e mban elementin tonë të lëvizur (imazhin) brenda kufijve të tij. Kodi ynë HTML duket si ky:

Ky shembull na jep rezultatin e dëshiruar, por çka nëse marrim dhe riorganizojmë disa elementë në HTML? Në shembullin I lëviza pas tekstit

Ky është një tekst i përmbajtur brenda një kutie të vogël. Unë po e përdor atë si një shembull se si vendosja e elementeve të tua të lundruara në renditje të ndryshme në HTML-në tuaj mund të ndikojë në paraqitjet tuaja. Për shembull, hidhini një sy kësaj mbajtëse të shkëlqyeshme fotografie që duhet të jetë në të djathtë.

Rezultati ynë nuk është ai që prisnim. Imazhi ynë është zhvendosur djathtas, por nuk është më në këndin e sipërm siç duam, por ka rënë poshtë paragrafit; edhe më keq, ai del nga fundi i elementit tonë prind #container. Cfare po ndodh?

Së pari. Rregulli im, të cilin e gjeta për veten time, është që së pari të notoj elementë. Në HTML-në time, unë shtoj pothuajse gjithmonë elementë të lundruar në fillim të shënimit dhe përpara çdo elementi jo-lundrues me të cilin do të ndërveprojnë notat e mia, siç është paragrafi në shembullin e mësipërm. Në shumicën e rasteve, kjo jep një rezultat pozitiv.

Së dyti. Arsyeja pse imazhi duket se del jashtë bllokut tonë të #kontejnerëve në fund është për shkak të diçkaje që quhet kolaps. Le të flasim për kolapsin dhe zgjidhjet.

kolaps

Kolaps është kur një element që ka ndonjë numër elementësh të notuar nuk i zgjeron kufijtë e tij rreth elementëve të mbivendosur, siç do të bënte nëse elementët e mbivendosur nuk do të ishin të notuar.

Tani le të përpiqemi ta rregullojmë këtë me CSS në vend që të shtojmë HTML shtesë në dokumentin tonë siç kemi bërë më parë. Ekziston një metodë që lejon elementin prind të "aplikojë" pronën e qartë pas të gjithë elementëve të lundruar. Kjo bëhet duke përdorur veçorinë e tejmbushjes CSS me një vlerë të fshehur. Ju lutemi, vini re se vetia e tejmbushjes nuk ishte menduar për këtë përdorim dhe mund të shkaktojë disa probleme si p.sh. fshehja e përmbajtjes ose shfaqja e një shiriti të padëshiruar lëvizjeje. Për shembullin tonë, sidoqoftë, ne do të zbatojmë përsëri veçorinë e tejmbushjes: hidden në elementin tonë prind #container:

#container ( tejmbushja: e fshehur; gjerësia: 260 pikselë; diferenca: 0 automatik; mbushja: 10 px 0 10 px 10 px; sfondi: #aaa; kufiri: 1 px solid #999; )

Dhe së fundi, Eric Meyer shpjegon një zgjidhje të tretë për këtë problem në artikullin e tij Containing Floats. Sipas CSS Spec 2.1:

një element me një veti float do të zgjerojë kufijtë e tij në elementët float që përmban.

Kështu, duke aplikuar veçorinë float në #container, kontejneri ynë do të përmbajë imazhin dhe paragrafin tonë, të ngjashëm me metodat e përshkruara më sipër.

Në fund të fundit, të gjitha këto zgjidhje bëjnë të njëjtën gjë. Ata i detyrojnë elementët prindër të marrin në konsideratë elementët e tyre të lundruar në rrjedhë. Secila metodë ka avantazhet dhe dobinë e saj. Ju duhet të kuptoni secilën prej tyre dhe më pas të aplikoni ato që funksionojnë më mirë për situatën tuaj.

konkluzioni

Duke përdorur veçorinë float, ju mund të përmirësoni ndjeshëm teknikën tuaj të paraqitjes. Të kuptuarit se si funksionon kjo pronë dhe çfarë ndikon në sjelljen e saj do t'ju japë një bazë të fortë për përdorimin efektiv të float.