Float és tiszta css - Eszközök blokk elrendezés

Üdvözlet, kedves olvasók webcodius.ru blog. Ma továbbra is tanulmányozza és fontolja meg a CSS szabályt úszót és tiszta, nagy jelentőséggel bírnak a blokk elrendezés oldalakon.

Létrehozása lebegő edényben float

Példa létre egy blogot a WordPress 4

Kezdetben a weboldal elemek vannak elhelyezve egymás mögött, abban a sorrendben, amelyben meghatározott egy html-kódot. Azáltal kódot bekezdés tag, fejezetek, listák, stb Az oldalon látjuk őket ugyanabban a sorrendben. De néhány CSS jellemzők tudjuk változtatni ebben a sorrendben. Egy úszó.

float szabály lehetővé teszi számunkra, hogy hozzon létre egy úgynevezett lebegő elemek. Ez azt jelenti, tudjuk meg a blokk eleme van jobb vagy bal szélén a szülő elem (a blokk a tartály, amelyben van ágyazva, vagy a web-oldalak). Ebben a blokkban elem nyomódik a megfelelő szélén a szülő, és a többi a tartalom fog folyni körülötte az ellenkező oldalról. Mint láttuk a tiszta html, tekintetbe az align attribútum értékeit balra és jobbra az img tag, mellyel beszúrni képeket a weboldalon.

Ez a szabály lehet három lehetséges értékek:

Alapértelmezésben ez használ egy lebegőpontos érték sem. vagyis az elemek nincs áramlás, és a sorrendben egymás után.

Az értékek a bal és jobb align weboldal elemek, illetve a bal és jobb széle a szülő elem, és a többi tartalom fog folyni körül a szemközti oldalon.

Vegyünk két blokkot tartalmaz. A kezdéshez egyszerűen kiemelje a háttér különböző színekben segítségével háttér szabályok:

És most az első és a div-let felírni úszó jellemzően balra érték, és megkérem keresztül behúzás tulajdonságok margin az érthetőség kedvéért kölcsönhatása a szomszédos tag:

Mint látható, az első div lett igazítva a bal és a tartalmát a szomszédos cella szalonna tekerje körül a jobb oldalon.

A szabályok alkalmazását, hogy az úszó sort elem, az utóbbi kezd viselkedni, mint egy blokk-szintű kölcsönhatás egyéb elemei a web-oldalakat. Például normális helyzetben, magasság, szélesség szabályok sorok nem fog működni. De alkalmazása után az attribútum úszó, méretparaméterek egyszerre kezdenek van értéke.

Nézzük hozzá az előző példákban a span és méretét írják neki a stílus:

A tartalom a vonal elem span

Az ábra azt mutatja, hogy a szabályok a szélességét és magasságát a span-, és nem működött, méretei egyformák legyenek összhangban annak tartalmát.

Most adjuk hozzá a span elem általában úszik balra értelmében:

A tartalom a vonal elem span

Most a span elem összhangban szerzett méretek CSS-szabályok és a szomszédos acél elemek áramlik körülötte a jobb oldalon. Ebből arra lehet következtetni, hogy ez a szabály is használható, mint egy úszó kisbetűk és blokkolni elemekkel. Sőt, függetlenül attól, hogy melyik elemet használnak rendszerint akkor válik a blokk.

Mi van, ha beállította az azonos értékű float style attribútum több egymást követő eleme? Lássuk:

A tartalom a vonal elem span

Ezek egymás mellett vízszintesen egymással abban a sorrendben, amelyben bejegyzett egy HTML-kódot, és összhangba hozzák a megadott szélén a szülő elem.

Továbbra is megjegyezni, hogy általában úszó használatban a blokk elrendezés alapján az úszó konténerek. Az alkalmazás egy ilyen tervezés gyakran kell helyezni azokat az elemeket, az alábbi azokat, amelyek igazodik a jobb vagy bal szélén. Ha egyszerűen eltávolítani őket lebegni stílus szabály vagy a Nincs rá, az eredmény kiszámíthatatlan lesz. Ebben az esetben jön a támogatás általában egyértelmű.

szabály törlése

Példa létre egy blogot a WordPress 4

stílus tiszta tulajdonság lehetővé teszi, hogy világosan jelzik, hogy a blokk elem minden esetben határérték alatt kell lennie úszó konténerek. Más szóval, ha az elem van megadva ingatlan csomagolja lebegőpontos, akkor kikapcsolja azt egyértelmű lépéseket ezen oldalán. Meg lehet venni a következő értékeket:

Amikor tiszta egyenlő baloldali elem alatt helyezkedik el az összes elemet, amely a tulajdonságait úszó úgy van beállítva maradt. Ha törli ugyanazt a jogot, majd törölték csomagolást a jobb oldalon. És mind törli lezárja mindkét oldalán az elem. Value sem felülbírálja világos szabályok és ez az alapértelmezett.

Add az előző példában, az első blokk div általában egyértelmű: bal:

A tartalom a vonal elem span

Ezzel a szabállyal tettünk a div, hogy figyelmen kívül hagyja a lebegő elem bal.

A moduláris felépítés - hozzanak létre egy hasábos elrendezés segítségével úszó

Példa létre egy blogot a WordPress 4

Ahogy már mondtam, float tulajdonság nagyon alkalmas létre oszlopok blokk elrendezés. Amikor létrehoz egy elrendezést, akkor általában kell építeni a blokkok egymás mellett, de az alapértelmezett CSS blokkokat állni egymás alatt. Ebben az esetben a támogatás az úszó elemek és a float tulajdonság.

Tegyük fel, hogy azt szeretnénk, hogy egy két hasábos elrendezés egy fejléc és lábléc. A bal oldali mezőben, mi lesz a menü, és a jobb oldalon a fő tartalma a helyszínen. Indításához előírni egy html-kódot a megfelelő blokkok:

Tehát mi egy külön mondatban sapka (id = "header"), bal oldali oszlop (id = "leftbar"), a tartalmi terület (id = "content") és pince (id = "footer"). Mielőtt blokkot kell helyezni az alábbiakban a korábbi szomszédai tettem az üres konténereket a „CLR” class = attribútumot. És így ez a html-kód jelenik meg a böngészőben:

Amint az ábrán látható, a blokkok sorakoznak annak érdekében, fentről lefelé. Blocks létre most előírják a stílus css (kérjen egy blokk leftbar általában lebegnek, korlátozzák a szélességét a, leftbar-tartalom-a és határozza meg a mintát a blokkok):

CLR clear: both;
>
#leftbar float: left;
szélesség: 250 képpont;
háttér: # E6EDF1;
>
#content szélesség: 750px;
háttér: #fff;
>
#footer háttér: # 314451;
szín: #fff;
text-align: center;
>

És nézd, mi történt:

Látjuk, hogy a szabály float: left blokk leftbar úszni kezdett, és a tartalmát a tartalmi blokk, ahogyan folyik körülötte. Ahhoz, hogy ez ne történhessen meg kérjen tartalom külső blokk behúzás használatával margin-left szabályok 10 pixel nagyobb, mint a szélessége a blokk leftbar:

#content szélesség: 750px;
háttér: #fff;
margin-left: 260px;
>

Ennek eredményeképpen kaptunk egy két hasábos elrendezés az oldalon.

Nos, nézzük összefoglalni. Ebben a cikkben, néztük két CSS tulajdonságokat, amelyek alapján blokk elrendezés:

1. lebegnek - használja úszó elemeket és lehetővé válik, hogy építeni blokkok egymással szomszédos;
2. világos - törli az úszó szomszédos blokk úszó elemek.