A floatCSS tulajdonság a weboldalak pozícionálására és elrendezésére szolgál.
.module ( float: left; )Értékek
none: az elem nem lebeg. Ez a kezdeti érték.left: lebegteti az elemet a tartályától balra.right: lebegteti az elemet a tartályától jobbra.inherit: az elem örökli a szülő úszóirányát.
display: block;
Mit jelent az úszó?
A cél és az eredet megértése érdekében floatmegnézhetjük a nyomtatás tervezését. Nyomtatási elrendezésben a képek úgy helyezhetők el az oldalon, hogy a szöveg szükség szerint körbevegye őket. Ezt általában és megfelelően „szövegburkolásnak” nevezik. Itt van egy példa erre.
Az oldalelrendező programokban meg lehet mondani, hogy a szöveget tartalmazó dobozok tiszteletben tartják-e a szöveget, vagy figyelmen kívül hagyják azt. A szövegburkolás figyelmen kívül hagyása lehetővé teszi, hogy a szavak úgy mozogjanak a kép felett, mintha ott sem lennének. Ez a különbség a kép között, amely az oldal folyamatának része (vagy sem). A webdesign nagyon hasonló.
A webdesignban az oldalelemek, floatamelyekre a CSS tulajdonságot alkalmazzák, olyanok, mint a nyomtatási elrendezésben lévő képek, ahol a szöveg körülöttük folyik. A lebegő elemek továbbra is a weboldal folyamatának részei maradnak. Ez egyértelműen eltér az abszolút pozicionálást használó oldalelemektől. Az abszolút helyzetben lévő oldalelemeket eltávolítják a weboldal folyamatából, például amikor a nyomtatási elrendezésben lévő szövegdoboz figyelmen kívül hagyta az oldal burkolását. Az abszolút helyzetben lévő oldalelemek nem befolyásolják más elemek helyzetét, és más elemek sem, függetlenül attól, hogy érintik-e egymást vagy sem.
Demó
Ez a bemutató egy cikket mutat, két képpel: egy float: leftés a float: right. Az úszók ki- és bekapcsolásához nyomja meg az „úszóváltás” gombot.
Lásd a CSS-Tricks (@ css-tricks) tollal lebegő példáját a CodePen-en.
Úszók az elrendezéshez
A szöveg köré csomagolásának egyszerű példájától eltekintve az úszók egész webes elrendezések létrehozására használhatók .
Az úszók kisebb példányokban is hasznosak az elrendezéshez. Vegyük például a weboldal ezen kis részét. Ha floataz avatar képünkhöz használjuk, amikor az a kép méretét megváltoztatja, a mezőbe beillesztett szöveg visszaverődik, hogy elférjen benne:
Ugyanez az elrendezés megvalósítható a tárolón való relatív pozícionálás és az avatar abszolút pozicionálása segítségével is. De ha így történik, az avatar nem érinti a szöveget, és nem lesz képes átgondolni a méretváltozást.
Demó
Ez a bemutató egy avatart mutat be float: left. Nyomja meg a „képméret váltása” gombot az avatar kép szélesebb változatának megtekintéséhez. Figyelje meg, hogy a szöveg a kép befogadására reflektál, ahelyett, hogy a képen futna.
Lásd a CSS-Tricks (@ css-tricks) Pen Float bemutatóját a CodePen-en.
Az úszó kitisztítása
Float testvérvagyona az clear. Az az elem, amelyen a cleartulajdonság van beállítva, nem mozog feljebb az úszó mellett, ahogy az úszó kívánja, hanem lefelé mozog az úszó mellett. Ismét egy illusztráció hasznosabb, mint a szavak:
A fenti példában az oldalsáv jobbra lebeg, és rövidebb, mint a fő tartalmi terület. Ezután a láblécnek fel kell ugrania arra a rendelkezésre álló helyre, ahogy azt az úszó megköveteli. A probléma megoldásához törölni kell a láblécet, hogy mindkét lebegő oszlop alatt maradjon.
#footer ( clear: both; )A Clear négy érvényes értékkel is rendelkezik. Az értéket bothhasználják leggyakrabban, amely megtisztítja a két irányból érkező úszókat. Az értékek leftés rightaz úszó csak egy irányból törölhető. A kezdeti érték az none, ami általában nem szükséges, hacsak nem egy kifejezetten eltávolított clearértéket használnak . Az érték arra inheritkészteti az elemet, hogy örökölje a szülő clearértékét. Furcsa módon az Internet Explorer az IE8-ig nem támogatta ezt az értéket.
Csak a leftvagy az rightúszó kitisztítása, bár a vadonban ritkábban fordul elő, mindenképpen felhasználható.
A nagy összeomlás
Az úszókkal való munkavégzés egyik legzavaróbb dolga az, hogy miként befolyásolhatják az őket tartalmazó elemet („szülő” elemük). Ha egy szülő elem nem tartalmaz úszó elemeket, akkor a magassága semmivé válik. Ez nem mindig nyilvánvaló, ha a szülő nem tartalmaz vizuálisan észrevehető hátteret, de fontos tisztában lenni vele.
Bármennyire is ellentmondásosnak tűnik az összeomlás, az alternatíva rosszabb. Vegye figyelembe ezt a forgatókönyvet:
Ha a tetején lévő blokkelem automatikusan kibővülne az úszó elem befogadására, akkor a bekezdések közötti szövegáramlásban természetellenes térköz-törés következne be, anélkül, hogy gyakorlati módon rögzítenénk. Ha ez lenne a helyzet, mi tervezők sokkal nehezebben panaszkodnánk erre a viselkedésre, mint mi az összeomlásra.
Az összeomlással szinte mindig foglalkozni kell a furcsa elrendezés és a böngészők közötti problémák megelőzése érdekében. Rögzítjük úgy, hogy megtisztítjuk az úszót a tartályban lévő lebegő elemek után, de a tartály bezárása előtt .
Az úszók tisztításának technikái
Ha olyan helyzetben van, hogy mindig tudja, mi lesz a sikeres elem, alkalmazhatja az clear: both;értéket arra az elemre, és folytathatja a vállalkozását. Ez ideális, mivel nem igényel fantasztikus feltöréseket és további elemeket, így tökéletesen szemantikus. Természetesen a dolgok általában nem így működnek, és több úszótisztító eszközzel kell rendelkeznünk az eszköztárunkban.
- Az Empty Div módszer szó szerint üres div.
- A túlcsordulási módszer a
overflowCSS tulajdonság szülőelemre történő beállításán alapul . Ha ezt a tulajdonságot a szülő elemre állítja,autovagyhiddena szülő elemre állítja , akkor a szülő kibővül az úszókkal, hatékonyan kitisztítva azt a következő elemek számára. Ez a módszer gyönyörűen szemantikus lehet, mivel nem igényelhet további elemeket. Ha azonban úgy találja magát, hogydivcsak azért ad hozzá újat , hogy ezt alkalmazza, az ugyanolyan szemantikátlan, mint az üresdivmódszer, és kevésbé alkalmazkodó. Ne feledje, hogy a túlcsorduló tulajdonság nem kifejezetten az úszók tisztítására szolgál. Vigyázzon, ne rejtse el a tartalmat és ne indítson el nem kívánt gördítősávokat. - Az Easy Clearing Method (más néven „clearfix”) ügyes CSS álválasztót () használ az
:afterúszók kitisztításához. Ahelyett, hogy beállítaná a túlcsordulást a szülőn, egy további osztályt alkalmaz, mint például a „clearfix”. Ezután alkalmazza ezt a CSS-t:.clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )Ez a tartalom egy kis részét fogja elrejteni a láthatóság elől, miután a szülő elem törli az úszót. Nem ez a teljes történet, mivel a régebbi böngészők számára további kódot kell használni. Megjegyzés: Tekintse meg ezt a részletet is, amely nyomon követi a legfrissebb és a legnagyobb javításokat, beleértve az újabb „micro clearfix” -et is.
Különböző forgatókönyvek különböző úszó elszámolási módszereket igényelnek. Vegyünk például egy blokkrácsot, amelyek mindegyike különféle.
A hasonló blokkok vizuális jobb összekapcsolása érdekében új sort akarunk kezdeni kedvünk szerint, ebben az esetben, ha a szín megváltozik. Használhatnánk akár a túlcsordulást, akár az egyszerű kitisztítási módszert, ha mindegyik színcsoportnak van szülőeleme. Vagy az üres div metódust használjuk az egyes csoportok között. Három olyan csomagoló div, amely korábban nem létezett, vagy három olyan div után, amely korábban nem létezett. Hagyom, hogy eldöntsd, melyik a jobb.
Problémák az úszókkal
Az úszókat gyakran törik meg, mert törékenyek. Ennek a törékenységnek a többségét az IE6 és az IE7 hibái okozták. Ahogy ezek a böngészők a múltba tűnnek, ezek a hibák együtt halnak. De még mindig érdemes megérteni őket, ha valaha is szükséged van egy „OldIE” hibakeresésére.
- A lebukás annak a tünete, hogy az úszó elem belsejében lévő elem szélesebb, mint maga az úszó (általában kép). A legtöbb böngésző a képet az úszón kívül rendereli, de a kilógott rész nem befolyásolja a többi elrendezést. Az IE régi verziói kibővítették az úszt, hogy tartalmazzák a képet, gyakran drasztikusan befolyásolva az elrendezést. Gyakori példa arra, hogy a fő tartalomból kilógó kép lefelé nyomja az oldalsávot.
Gyorsjavítás: Győződjön meg arról, hogy nincs képe, amely ezt megteheti. Használja
overflow: hidden;a felesleg levágásához. - Double Margin Bug - Egy másik dolog, amire emlékezni kell az IE 6 használatakor, hogy ha az úszóval azonos irányba alkalmazza a margót, az megduplázza a margót. Gyorsjavítás: állítsa
display: inlineaz úszóra, és ne aggódjon, blokkszintű elem marad. - A 3 képpontos Jog az, amikor a lebegő elem mellett fent lévő szöveget titokzatos módon 3 képpont képpen elrúgja, mint egy furcsa erőtér az úszó körül. Gyorsjavítás: szélesség vagy magasság beállítása az érintett szövegre.
- Az IE 7-ben az Alsó margó hiba az volt, amikor egy lebegő szülő gyermekeket lebegtetett benne, akkor a szülő figyelmen kívül hagyja ezeknek a gyerekeknek az alsó margóját. Gyors javítás: az alsó párnázás használata a szülő helyett.
Alternatívák
Ha szövegre van szükség a képek köré, akkor valójában nincsenek alternatívák a lebegésre. Ennek apropóján ellenőrizze ezt a meglehetősen okos technikát a szöveg szabálytalan alakzatok köré tekerésére. De az oldalelrendezés szempontjából mindenképpen vannak választási lehetőségek. Eric Solnak van egy cikke az A List Apartról, a Faux Absolute Positioningről, amely egy nagyon érdekes technikát ír le, amely sok szempontból egyesíti az úszók rugalmasságát az abszolút pozicionálás erősségével.
A CSS3 az oldal elrendezését többféle módon kezeli:
- Flexbox
- Többoszlopos elrendezés
- Rácsszerkezet
Az abszolút helyzetben lévő úszókat (pl. Teljesen normálisan helyezkedsz el, de az elem még mindig képes befolyásolni más elemeket, például szöveget kell körbevenni), de azt gondolom, hogy az ötletet más erőteljesebb elrendezési ötletekkel való hasonlóság miatt állítottam be.
Videó
Csináltam egy screencast-ot, és sok ilyen úszó fogalmat elmagyaráztam.
Összefüggő
clearposition
Több információ
floata W3C specifikációjábanfloataz MDN-nél
Böngésző támogatás
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| Összes | Összes | Összes | Összes | Összes | Összes | Összes |