Paano Bumuo Ng Isang Site Grid Gamit Ang Mga Float: Nahuhulog Sa Stream

Paano Bumuo Ng Isang Site Grid Gamit Ang Mga Float: Nahuhulog Sa Stream
Paano Bumuo Ng Isang Site Grid Gamit Ang Mga Float: Nahuhulog Sa Stream

Video: Paano Bumuo Ng Isang Site Grid Gamit Ang Mga Float: Nahuhulog Sa Stream

Video: Paano Bumuo Ng Isang Site Grid Gamit Ang Mga Float: Nahuhulog Sa Stream
Video: Dizziness and Vertigo, Part I - Research on Aging 2024, Nobyembre
Anonim

Bigyang-pansin natin ang mga kawalan ng float. Paano kumikilos ang mga elemento ng block at inline sa bawat isa at kung gagamitin ang mga ito nang magkasama. Pag-aralan natin kung ano ang isang pagkawala at kung paano ito makitungo.

Paano bumuo ng isang site grid gamit ang mga float: pagbagsak sa stream
Paano bumuo ng isang site grid gamit ang mga float: pagbagsak sa stream

Sa kabila ng katotohanang sa huling artikulo ay nagtayo kami ng isang simpleng grid para sa site na gumagamit ng mga float, orihinal na nilayon nilang ayusin ang daloy ng mga elemento sa teksto. Ang Float ay may tatlong kahulugan: kaliwa - ang mga elemento ay dumidikit sa kaliwang margin; kanan - ang mga elemento ay pinindot sa kanang gilid; wala - Hindi pinagana ang mode na Balot.

Ang isang elemento na nakabalot ng float ay maaaring sukat at may palaman, ngunit kung ang elemento ay nakahanay ay uugali ito tulad ng isang elemento ng block.

.block1 {

lumutang pakaliwa;

lapad: 150px;

}

.block2 {

lumutang: kanan;

lapad: 150px;

}

May isa pang problema kapag gumagamit ng floats, na nahuhulog sa stream. Lumilitaw ito kapag ang mga bloke ay magkakasunud-sunod, ngunit isa lamang sa kanila ang may float na pag-aari, pagkatapos ay makikita ito sa tuktok ng pahinga, dahil hindi ito nakakakita ng iba pang mga bloke. Balot ng mga elemento ng linya ang mga elemento ng float, ngunit ang bloke na naglalaman ng teksto na ito ay mananatili sa ilalim ng elemento ng float.

Larawan
Larawan

Ngunit paano nakikipag-ugnayan ang float sa float?

Nag-uugali sila tulad ng teksto: sunud-sunod silang tumayo hangga't may libreng puwang, at pagkatapos ay lumipat sa isang bagong linya. Samakatuwid, sa tulong ng mga float, nagsimula kaming bumuo ng mga grids. Kung walang natitirang puwang, pagkatapos ay ilipat ang mga ito lampas sa lapad ng site, iyon ay, wala silang pupuntahan.

Kung ang float ay hindi nakakakita ng mga simpleng elemento ng block, kung gayon ang mga elemento ng block ay maaaring turuan na makita ang float. Ginagamit namin ang malinaw na pag-aari, na hindi pinagana ang pambalot mula sa lahat ng panig (o mula sa mga napili). Iyon ay, ang isang elemento na may malinaw ay mahuhulog sa ilalim ng elemento na may float.

Inirerekumendang: