Co znamená float? Jasná funkce pro řešení problémů. Rozdíly mezi plovoucími a polohovými prvky

Abychom demonstrovali důležitost vlastnosti float v tomto příkladu, zde je snímek obrazovky stejného obrázku po použití firebug k odstranění float: left:

Grid-založené fotogalerie

Jednoduchým použitím vlastnosti float je float:left série fotografií obsažených v neuspořádaném seznamu, což vede ke stejnému výsledku, jako byste viděli v označení tabulky.

Především kanadská produktová stránka (viz obrázek výše) zobrazuje své produkty ve formátu mřížky vedle postranního panelu. Fotografie se zobrazují jako neuspořádaný seznam s vlastností float pro všechny

Stránka futonů Paragon Furniture (viz obrázek výše) je dalším příkladem produktové stránky používající neuspořádaný seznam s plovoucími značkami

Stránka s výsledky vyhledávání iStockphoto (viz obrázek výše) má stejnou mřížku strukturovaných fotografií, zde fotografie obsahují float:left

Zarovnání pole s tlačítkem

Modelování výchozích prvků formuláře pro různé prohlížeče může být problematické. Často je třeba vložit do jednoho pole formuláře, jako je vyhledávací formulář vedle tlačítka „odeslat“.

V moderním web designu, majetku plovák používá se téměř na každém kroku. Ale i přes tuto prevalenci ne každý rozumí mechanismu plovoucích bloků, jejich chování a jaké důsledky může mít jejich použití.

Co je to "float"?

Plovák Toto je vlastnost umístění CSS. Abyste pochopili jeho podstatu a původ, musíte věnovat pozornost tištěnému designu. V tištěných rozvrženích může být obrázek umístěn tak, aby text obtékal. To se obvykle nazývá " zalamování textu".

V rozvržení stránky lze určit, že se má použít blok, který obsahuje text obtékání textu kolem obrázku nebo ignorovat obal. Ignorování zalamování textu umožní, aby slova přetékala přes obrázek, jako by tam nebyla. To je rozdíl, zda je obrázek součástí toku na stránce nebo ne. Ve webdesignu je vše velmi podobné.

Ve webovém designu se na něj vztahuje prvek s vlastností CSS plovák se bude chovat jako obrázek s obtékajícím textem v tištěném rozvržení. Plovoucí prvky zůstávají součástí toku webové stránky. To je zcela odlišné od absolutně umístěných prvků, které jsou odstraněny z toku, jako by v tištěném rozvržení bylo textovému bloku řečeno, aby ignoroval zalamování obrázku. Absolutně umístěné prvky neovlivňují umístění ostatních prvků a ostatní prvky neovlivňují jejich umístění.

Nastavení vlastnosti plovák pro prvky používající CSS vypadá takto:

#sidebar ( float: right; )

Pro vlastnost jsou platné čtyři hodnoty plovák - vlevo, odjet, že jo, žádný, zdědit. První dva vlevo, odjet A že jo označte směr umístění - vlevo a vpravo. Žádný- výchozí hodnota, označuje, že prvek není plovoucí a zdědit pokyn prvku, aby zdědil hodnotu vlastnosti plovák z rodičovského prvku.

K čemu se plovák používá?

Kromě jednoduchého příkladu obtékání textu kolem obrázku, plovák lze použít k vytváření webových rozvržení.

Plovák, je také vhodné použít pro malé prvky rozvržení. Vezměme si například tento malý fragment webové stránky. Pokud nastavíme vlastnost plovák U malého obrázku avatara se při změně velikosti obrázku změní obtékání podle nových rozměrů obrázku:

Stejné rozložení lze implementovat pomocí relativního umístění kontejneru a absolutního umístění avatara a textu v něm. V rozložení implementovaném podle tohoto schématu však změna velikosti obrázku neovlivní textový blok, protože prvky s absolutním umístěním neovlivňují ostatní prvky a jiné prvky je neovlivňují.

Zabalit reset

Průhledná související majetek s majetkem plovák. Prvek se sadou vlastností Průhledná se nebude pohybovat nahoru kolem prvku se sadou vlastností plovák, ale bude se pohybovat dolů a ignorovat tok. A opět ilustrace, která vše bez dalšího vysvětlí.

Ve výše uvedeném příkladu se postranní panel vznášel napravo od bloku hlavního obsahu. „Zápatí“ se přesunulo do volného prostoru pod postranním panelem a obtéká blok s hlavním obsahem. Chcete-li tento problém vyřešit, musíte zadat hodnotu vlastnosti clear:both zápatí, aby se "vyčistil" tok kolem obou sloupců.

#footer ( jasné: obojí; )

Vlastnictví Průhledná má čtyři významy. Oba slouží k uvolnění proudění v obou směrech. Vlevo, odjet A Že jo slouží k resetování jednoho směru - vlevo nebo vpravo, resp. Žádný- výchozí hodnota. Zdědit může být pátá hodnota, ale překvapivě není podporována internet Explorer. Resetování pouze levého nebo pravého toku je poměrně vzácné, ale má praktické výhody.

Velký kolaps

Jedna věc o práci s plovák Co je záhadné, je účinek této vlastnosti na rodičovské prvky. Pokud nadřazený prvek neobsahuje žádné jiné prvky než float, pak se jeho výška doslova zhroutí. To není vždy patrné, zvláště pokud nadřazený prvek nemá výrazné pozadí, ale je důležité to mít na paměti.

Ale alternativa k takovému kolapsu je ještě horší. Zvažte následující scénář:

Pokud se horní blok automaticky rozšíří, aby se do něj vešel plovoucí prvek, skončíme s mezerou v toku textu mezi odstavci, kterou nelze nijak opravit. Pokud by tomu tak bylo, pak by si vývojáři na toto chování plovoucích bloků stěžovali mnohem častěji než nyní na kolaps.

Sbalení byste měli mít vždy na paměti, abyste předešli podivnému chování rozvržení a problémům s různými prohlížeči. Tento problém můžeme vyřešit pomocí Průhledná po plovoucím prvku v nádobě, ale před uzavřením nádoby.

Techniky zrušení balení

Pokud jste v situaci, kdy víte, kde bude další prvek, můžete použít clear:both a jít na věc. To je ideální, protože nevyžaduje žádné hacky ani další prvky. Ale bohužel většinou ne všechno jde tak, jak bychom chtěli, a v tomto případě můžete využít následující nástroje.

Metoda prázdného bloku.

Je to doslova prázdný blok.

Metoda přetečení.

Na základě specifikace vlastností CSS přetékat pro nadřazený prvek. Pokud je tato vlastnost nastavena na auto nebo skrytý u nadřazeného prvku se roztáhne po plovoucím prvku, čímž se účinně obnoví jeho obalování pro následující prvky. Tato metoda může být sémanticky krásná, protože nevyžaduje další prvky. Nicméně, jak vidíte, přidali jsme nový div použít tuto metodu, která je ekvivalentní použití nesémantického prázdného bloku a je méně flexibilní. Je třeba také připomenout, že vlastnost přetékat není určen k deaktivaci zalamování. Dávejte pozor, abyste omylem neskryli obsah nebo nezpůsobili nežádoucí posuvníky.

Snadná metoda čištění.

K odstranění zalamování používá pseudoselektor CSS (:after). Místo užívání nemovitosti přetékat Pro nadřazený prvek pro něj nastavte další třídu, například „clearfix“ a použijte následující styl CSS:

Clearfix:after ( obsah: "."; viditelnost: skrytá; zobrazení: blok; výška: 0; vymazat: obojí; )

To používá malý kousek obsahu skrytý před pohledem, který se nachází za nadřazeným prvkem, který resetuje obal. Tato metoda není úplná, protože je třeba ji zlepšit, aby podporovala starší prohlížeče.

Různé situace vyžadují různé metody úlevy při blafování. Vezměme si jako příklad mřížku různých typů bloků.

Pro lepší vizuální kombinaci podobných bloků bychom měli při změně barvy začít nový řádek. Pokud má každá skupina barev nadřazený prvek, můžeme použít metodu přetečení nebo vymazání světla. Nebo použijeme metodu prázdných bloků mezi skupinami. Tři rodičovské bloky, které dříve neexistovaly, nebo tři prázdné bloky, které dříve neexistovaly. Je na vás, abyste se rozhodli, která metoda je lepší.

Problémy s plovoucími prvky

Plovoucí prvky jsou často kritizovány kvůli jejich křehkosti. Velká část této křehkosti pochází z IE6 a jeho plovákově orientované chyby. Ale jak stále více vývojářů upouští od podpory IE6, možná o tom nepřemýšlíte, ale pro ty, kterým záleží na kompatibilitě, zde je krátký seznam.

Pushdown, je příznak, že prvek uvnitř plovoucího bloku je širší než tento blok (to se obvykle stává u obrázků). Většina prohlížečů vykreslí plovoucí prvek vyčnívající, ale to nebude mít žádný vliv na rozvržení. IE rozšíří plovoucí blok a často to má drastický vliv na rozložení. Typickým příkladem je obrázek trčící z hlavního bloku obsahu, který tlačí postranní lištu dolů.

Rychlé řešení problému: použití přetečení: skryté; odříznout přebytek.

Chyba dvojitého okraje- další věc, kterou je třeba pamatovat při práci s IE6. Tato chyba je vyjádřena v tom, že pokud je pole na stejné straně, jako je orientováno plovák, pole je zdvojnásobeno. Například:

Dostaneme levé pole 40 pixelů., namísto 20 pixelů.

Rychlé řešení problému: Nastavte zobrazení: inline pro plovoucí blok a nebojte se, prvek zůstane na úrovni bloku.

3px Jog. Podstatou této chyby je, že text umístěný vedle plovoucího prvku je podivně posunut o tři pixely, jakoby pod vlivem silového pole umístěného kolem plovoucího prvku. Rychlé řešení problému: Nastavte šířku a výšku dotčeného textu.

Objevuje se v IE7 Chyba na spodním okraji, kdy je nadřazený prvek plovoucím prvkem a jeho podřízený prvek umístěný uvnitř je také plovoucím prvkem. Spodní okraj (margin-bottom) potomka je ignorován prvkem předka. Rychlé řešení problému: Použijte padding-bottom na nadřazený prvek namísto margin-bottom na podřízený prvek.

Otázky o tom, jak fungují vlastnosti CSS float left a float right, se objevují se záviděníhodnou pravidelností. To se stává obzvláště bolavým tématem pro designéry a programátory, kteří léta sestavují rozvržení na tabulkách a nyní jsou nuceni pracovat s bloky. Navíc to zhoršují problémy s rozložením cossbrowseru, i když v poslední době toto téma nějak začalo zmenšovat nervy specialistů.

Každopádně místo neustálého odpovídání na stejné otázky, jak fungují vlastnosti CSS float left a float right, jsem se rozhodl napsat příspěvek a poslat do něj všechny trpící.

Ujišťuji vás, že v tomto příspěvku nebude nic nového. Takových informací je na internetu spousta. Ale pokaždé, když ukážu příklad na prstech nebo hledám odkaz, kam poslat svého dalšího zaměstnance, už jsem unavený. Proto zde uvedeme krátkou sbírku toho, s čím se nejčastěji setkáváme.

Bloky v kontejneru s nastavenými vlastnostmi CSS float left a float right

Typický problém:

1. Existuje kontejner se dvěma nebo více bloky.
2. Vnitřní bloky mají nastavenou vlastnost CSS float left nebo right.
3. Pokud velikost bloku nestačí, obsah zespodu se začne vejít do bloku a celé rozložení se rozpadne.

Níže uvedené ilustrace ukazují několik takových případů.

Situace se dvěma nebo více bloky s vlastností float left CSS

To by mělo být:

Situace, kdy jeden blok má vlastnost CSS plovoucí vlevo a jiný vpravo

To by mělo být:

Jak to vypadá, když je rozložení nesprávné:

Proč k této situaci došlo?

Naše bloky s vlastnostmi CSS float left a float right jsou umístěny uvnitř kontejneru, který má na dně určitou výplň. Navzdory zdánlivě správným parametrům odsazení zespodu nejen že nefunguje, ale také nám obsah spodních bloků leze do horního bloku.

Jde o to, že bloky se specifikovanými vlastnostmi float neovlivňují změnu výšky jejich kontejneru.

Například: v prvním případě jsou všechny bloky uvnitř kontejneru plovoucí. Proto bude výška kontejneru nulová.

V druhém případě máme v kontejneru kromě plovoucích bloků i text. Výška kontejneru tedy bude odpovídat výšce textu vyplňujícího tento blok. Pokud je tedy text větší než výška vnitřních plovoucích bloků, problém si nevšimnete. Pokud není dostatek textu, jako ve výše uvedeném příkladu, obsah spodních bloků se rozšíří až ke spodnímu okraji kontejneru.

Řešení 1 Přidejte prázdný blok s vlastností CSS clear: both

Před uzavírací značku kontejneru musíte umístit blok s vlastností CSS clear:both. Poté bude kontejner rozšířen na spodní blok, protože tato vlastnost blokuje vliv bloků s vlastnostmi CSS float left a float right.

Ukázkový kód stránky:

Můžete také umístit blok s vlastností clear:both bezprostředně za uzavírací značku kontejneru nebo za poslední plovoucí blok. Kontejner v této situaci nezmění svou velikost. A celkově to nebude potřeba, ale blok s vlastností clear: both jednoduše odřízne obsah od plovoucích bloků.

Ukázkový kód stránky:

Ne každý však ví, že směrové pole odpovídá determinantu soustavy lineárních rovnic, což není překvapivé. Navíc determinant systému lineárních rovnic kategoricky obnovuje vektor, jak se očekávalo. Okolí bodu je stále žádané. Lema, jak vyplývá z výše uvedeného, ​​výrazně stabilizuje abstraktní divergentní řadu, což nás nepochybně dovede k pravdě. Lema smysluplně rozplétá nevyvratitelný přirozený logaritmus, další výpočty přenecháme studentům jako jednoduchý domácí úkol.

Ukázkový kód CSS:

Container ( display: block; ) .in_block ( display: block; float: left; width: 100px; height: 100px; margin-right: 10px; ) .clear ( display: block !important; margin: 0px !important; padding: 0px !důležité: oba !důležité; žádné !důležité;

Metodologicky to není nejelegantnější řešení, i když si zaslouží právo na život, protože je docela efektivní. Zjevnou nevýhodou je fakt, že do textu stránky musíme přidat další kód.

Řešení 2: Explicitně specifikujte výšku kontejneru

Možnost nastavení výšky nádoby je dobrá pouze v případě, že přesně znáte předpokládanou velikost obsahu této nádoby. Pak bude naše CSS vypadat nějak takto:

Kontejner ( display: block; height: 100px; ) .in_block ( display: block; float: left; width: 100px; height: 100px; margin-right: 10px; )

V případě, že je obsah dynamický nebo rozložení je „plynulé“ a šířka kontejneru se může měnit, pak to nebude tak dobré řešení.

Řešení 3: Nastavte vlastnost CSS overflow na kontejneru

Pokud nastavíte hodnotu vlastnosti kontejneru přetékat rovnat se auto nebo skrytý, prohlížeč znovu sestaví kontejner tak, aby se do něj vešly všechny plovoucí bloky a nezobrazovaly se posuvníky.

Pokud nastavíte vlastnost overflow na auto, připravte se na to, že se v některých situacích mohou stále zobrazovat posuvníky. Proto byste měli důkladně zkontrolovat rozložení v různých režimech.

Ukázkový kód CSS:

Kontejner ( display: block; overflow: auto; ) .in_block ( display: block; float: left; width: 100px; height: 100px; margin-right: 10px; )

Dva bloky na stejné úrovni se zadanými vlastnostmi CSS plavou vlevo a plovoucí vpravo

Typická situace: text, který obtéká dva bloky s nějakým obsahem. V tomto případě jsou bloky umístěny po stranách textu.

To by mělo být:

Vlastnost Float je významným a výkonným přínosem pro webové vývojáře pracující s HTML a CSS. Na druhou stranu může být frustrující a matoucí, pokud plně nerozumíte tomu, jak tato vlastnost funguje.

Překlad článku CSS Floats 101. Původní alistapart.com

Také v minulosti bylo kvůli některým docela ošklivým chybám v prohlížeči normální být při používání vlastnosti nervózní plovák ve vašich sadách pravidel CSS. Pojďme ale uklidnit nervy a pokusme se zmírnit zklamání. Ukážu vám, co přesně vlastnost float dělá s vašimi prvky a jak ji pohodlně používat.

Každý den vidíme v tištěném světě plováky, když se podíváme na článek v časopise s obrázkem umístěným vlevo nebo vpravo a textem pěkně uspořádaným kolem něj. Ve světě HTML/CSS text zalomí obrázek v závislosti na vlastnosti float, která je na tento obrázek aplikována. Použití vlastnosti float na obrázku je jen jedním z mnoha příkladů. Jako další příklad, pomocí vlastnosti float můžeme velmi snadno vytvořit oblíbené dvousloupcové rozložení. Vlastnost float můžete ve skutečnosti použít na jakýkoli prvek ve vašem HTML. Když se naučíte a pochopíte použití vlastnosti float spolu s vlastností position, můžete se při vytváření jakéhokoli rozvržení cítit pohodlně a sebejistě.

Definice plováku

Začněme tím, že definujeme, co je plovák.

Float je pole, které se pohybuje doprava nebo doleva podél aktuálního řádku. Nejzajímavější vlastností plováku je, že obsah může proudit po jeho boku. Při použití vlastnosti float: left bude obsah stékat dolů po boxu na pravé straně a podobně s float: right - dolů na levé straně.

Vlastnost float má 4 hodnoty, které můžeme použít: left , right , inherint a none . Každý význam je docela jasný. Pokud například na prvku použijete float: left, přesune se k levému okraji vzhledem k nadřazenému prvku. A pokud zadáte float: right , prvek se podobně přesune doprava. Hodnota ihnerit říká prvku, aby zdědil vlastnost od svého nadřazeného prvku. A poslední hodnota none je výchozí a říká, že se vlastnost nemá použít plovák k tomuto prvku.

#container ( width: 960px; margin: 0 auto; ) #content ( float: left; width: 660px; background: #fff; ) #navigation ( float: right; width: 300px; background: #eee; ) #footer ( clear: both background: #aaa; padding: 10px )

Naše #zápatí uvízlo pod #navigačním blokem. Stalo se to proto, že pod #navigačním blokem je prostor pro #zápatí a pro normální tok umístění bloku je to správné chování. Ale to rozhodně není to, co potřebujeme, že? Předpokládám, že již vidíte vztah mezi float a clear a chápete, jak se vzájemně doplňují.

Pokud máte obsedantně-kompulzivní poruchu jako já, možná jste si všimli různé výšky sloupců #content a #navigation v příkladu F; Existuje několik řešení, ale to je nad rámec tohoto článku. Vřele doporučuji přečíst si Faux Columns od Dana Cederholma, abyste se naučili, jak vyrobit bloky stejné výšky, bez ohledu na obsah uvnitř.

Nejprve plavte

Zatím jsme viděli několik docela jednoduchých příkladů, které nezpůsobují mnoho bolestí hlavy. Existuje však několik úskalí, na která je třeba si uvědomit při používání vlastnosti float. Jedno z největších úskalí má překvapivě méně společného s CSS a více s HTML. Umístění plovoucího prvku do HTML může vést k různým výsledkům. Podívejte se na příklad H.

Zde máme malý blok, který má obrázek s vlastností float:right a textem, který jej obklopuje. Naše CSS vypadá takto:

#container ( šířka: 280px; okraj: 0 auto; odsazení: 10px; pozadí: #aaa; okraj: 1px plný #999; ) img ( plovoucí: vpravo; )

Náš nadřazený prvek #container má úzkou šířku a udržuje náš plovoucí prvek (obrázek) ve svých hranicích. Náš HTML kód vypadá takto:

Tento příklad nám dává požadovaný výsledek, ale co když vezmeme a přeuspořádáme některé prvky v HTML? V příkladu I jsem se přestěhoval za textem

Toto je nějaký text obsažený v malém rámečku. Používám to jako příklad toho, jak může umístění vašich plovoucích prvků v různých pořadích v HTML ovlivnit vaše rozvržení. Podívejte se například na tento skvělý zástupný symbol fotografie, který by měl sedět vpravo.

Náš výsledek není takový, jaký jsme očekávali. Náš obrázek se posunul doprava, ale už není v horním rohu, jak bychom chtěli, ale klesl pod odstavec; Ještě horší je, že vyčnívá ze spodní části našeho nadřazeného prvku #container. Co se děje?

Za prvé. Mým pravidlem, které jsem si pro sebe našel, je nejprve plout prvky. V mém HTML téměř vždy přidávám plovoucí prvky na začátek označení a před všechny neplovoucí prvky, se kterými budou moje plovoucí prvky interagovat, jako je odstavec ve výše uvedeném příkladu. Ve většině případů to dává pozitivní výsledek

Za druhé. Důvodem, proč se zdá, že obrázek vyčnívá ze spodní části našeho #container bloku, je něco, čemu se říká kolaps. Pojďme mluvit o kolapsu a řešeních.

Zhroucení

Sbalení nastane, když prvek, který má libovolný počet plovoucích prvků, nerozšíří své hranice kolem svých vnořených prvků, jako by tomu bylo, kdyby vnořené prvky nebyly plovoucí.

Nyní to zkusme opravit pomocí CSS namísto přidávání dalších značek HTML do našeho dokumentu, jako jsme to dělali dříve. Existuje metoda, která umožňuje rodičovskému prvku "aplikovat" vlastnost clear po všech plovoucích prvcích. K tomu použijte vlastnost CSS overflow s hodnotou hidden . Vezměte prosím na vědomí, že vlastnost overflow nebyla určena k použití tímto způsobem a může způsobit určité problémy, jako je skrytí obsahu nebo zobrazení nežádoucího posuvníku. V našem příkladu však stále použijeme vlastnost overflow: hidden na náš nadřazený prvek #container:

#container ( přetečení: skryté; šířka: 260px; okraj: 0 auto; výplň: 10px 0 10px 10px; pozadí: #aaa; rám: 1px plný #999; )

A nakonec, Eric Meyer vysvětluje třetí řešení tohoto problému ve svém článku obsahující plováky. Podle specifikace CSS 2.1:

prvek s vlastností float rozšíří své hranice na plovoucí prvky uvnitř.

Takže použitím vlastnosti float na #container bude náš kontejner obsahovat náš obrázek a odstavec, podobně jako výše popsané metody.

Všechna tato řešení nakonec dělají totéž. Přinutí rodičovské prvky, aby započítaly své plovoucí prvky do toku. Každá metoda má své výhody a výhody. Musíte porozumět každému z nich a poté použít ty, které budou ve vaší situaci fungovat nejlépe.

Závěr

Použitím vlastnosti float můžete výrazně zlepšit svou techniku ​​aranžování prvků. Pochopení toho, jak daná vlastnost funguje a co ovlivňuje její chování, vám dá pevný základ pro efektivní používání float.