Float - Triky CSS

Anonim

floatNemovitost v CSS se používá pro určování polohy a uspořádání na webových stránkách.

.module ( float: left; )

Hodnoty

  • none: prvek nepluje. Toto je počáteční hodnota.
  • left: plovoucí prvek nalevo od jeho kontejneru.
  • right: plovoucí prvek napravo od jeho kontejneru.
  • inherit: prvek zdědí směr plovoucího nadřazeného prvku.
Poznámka: Plovoucí prvek je automaticky display: block;

Co znamená Float?

Abychom pochopili účel a původ float, můžeme se podívat na tiskový design. V tiskovém rozvržení mohou být obrázky nastaveny na stránku tak, aby se kolem nich podle potřeby obtékal text. Toto se běžně a vhodně nazývá „zalomení textu“. Zde je příklad toho.

V programech pro rozložení stránky lze říci, že políčka, která obsahují text, mají respektovat zalamování textu nebo jej ignorovat. Ignorování zalamování textu umožní slovům proudit přímo přes obrázek, jako by tam ani nebyl. To je rozdíl mezi tím, že tento obrázek je součástí toku stránky (nebo ne). Webový design je velmi podobný.

Ve webovém designu jsou prvky stránky, floatna které je použita vlastnost CSS, stejné jako obrázky v rozložení tisku, kde kolem nich proudí text. Plovoucí prvky zůstávají součástí toku webové stránky. To se výrazně liší od prvků stránky, které používají absolutní umístění. Absolutně umístěné prvky stránky jsou odstraněny z toku webové stránky, jako když bylo řečeno, že textové pole v rozložení tisku má ignorovat zalamování stránky. Absolutně umístěné prvky stránky nebudou mít vliv na polohu ostatních prvků a ostatní prvky na ně nebudou mít vliv, ať se navzájem dotýkají nebo ne.

Ukázka

Tato ukázka ukazuje článek se dvěma obrázky: jeden nastaven na float: lefta druhý nastaven na float: right. Stisknutím tlačítka „přepnout plováky“ plováky vypnete a zapnete.

Podívejte se na ukázku Pen Float od CSS-Tricks (@ css-tricks) na CodePen.

Plováky pro rozložení

Kromě jednoduchého příkladu obtékání textu kolem obrázků lze pomocí plováků vytvořit celé rozložení webu .

Plováky jsou také užitečné pro rozložení v menších případech. Vezměme si například tuto malou oblast webové stránky. Použijeme-li floatpro náš obrázek avatara, změní se při změně velikosti obrázku text v poli, aby se do něj vešel:

Stejného rozložení lze dosáhnout pomocí relativního umístění na kontejneru a absolutního umístění také na avataru. Pokud by to ale bylo provedeno, avatar by text neovlivnil a nebyl by schopen přeformátovat změnu velikosti.

Ukázka

Tato ukázka zobrazuje avatara s float: leftpoužitým. Stisknutím tlačítka „přepnout velikost obrázku“ zobrazíte širší verzi obrázku avatara. Všimněte si, že text přeformátuje, aby se přizpůsobil obrázku, místo aby přes něj běžel.

Podívejte se na ukázku Pen Float od CSS-Tricks (@ css-tricks) na CodePen.

Vymazání plováku

Floatův sesterský majetek je clear. Prvek, který má nastavenou clearvlastnost, se nebude pohybovat v sousedství plováku, jak si to plovák přeje, ale sám se přesune dolů za plovák. Ilustrace je opět užitečnější než slova:

Ve výše uvedeném příkladu je postranní panel plovoucí vpravo a je kratší než hlavní oblast obsahu. Zápatí je poté nutné vyskočit do tohoto volného prostoru, jak to vyžaduje plovák. Chcete-li tento problém vyřešit, lze zápatí vymazat, aby bylo zajištěno, že zůstane pod oběma plovoucími sloupci.

#footer ( clear: both; )

Clear má také čtyři platné hodnoty. Hodnota bothse nejčastěji používá, který odstraní plováky přicházející z obou směrech. Hodnoty lefta rightlze použít pouze k vymazání plováku z jednoho směru. Počáteční hodnota je none, což je obvykle zbytečné, pokud se nepoužívá k výslovnému odstranění clearhodnoty, která byla nastavena. Díky této hodnotě inheritzdědí prvek clearhodnotu svého rodiče . Kupodivu, Internet Explorer nepodporoval tuto hodnotu, dokud IE8.

Vymazání pouze leftnebo rightplovák, i když méně často viděný ve volné přírodě, rozhodně má své použití.

Velký kolaps

Jednou z nejúžasnějších věcí na práci s plováky je to, jak mohou ovlivnit prvek, který je obsahuje (jejich „nadřazený“ prvek). Pokud nadřazený prvek neobsahuje nic jiného než plovoucí prvky, jeho výška se sbalí na nic. To není vždy zřejmé, pokud rodič neobsahuje žádné vizuálně viditelné pozadí, ale je důležité si toho být vědom.

Jakkoli se může zdát neintuitivní, jak se hroutí, alternativa je horší. Zvažte tento scénář:

Pokud by se prvek bloku nahoře měl automaticky rozšířit, aby se vešel na plovoucí prvek, došlo by k nepřirozenému přerušení mezer v toku textu mezi odstavci bez praktického způsobu jeho opravy. Pokud by tomu tak bylo, my designéři bychom si na toto chování stěžovali mnohem tvrději než na zhroucení.

Sbalení je téměř vždy nutné řešit, aby se zabránilo podivnému rozložení a problémům s různými prohlížeči. Opravíme to odstraněním plováku po plovoucích prvcích v kontejneru, ale před uzavřením kontejneru.

Techniky čištění plováků

Pokud se nacházíte v situaci, kdy vždy víte, jaký následný prvek bude, můžete použít clear: both;hodnotu tohoto prvku a začít podnikat. To je ideální, protože nevyžaduje žádné fantastické hacky a žádné další prvky, díky nimž je dokonale sémantický. Samozřejmě to tak obvykle nefunguje a v naší sadě nástrojů musíme mít více nástrojů pro čištění plováku.

  • Metoda Empty Div je doslova prázdná div. . Někdy uvidíte
    použitý prvek nebo jiný náhodný prvek, ale div je nejběžnější, protože nemá žádný výchozí styl prohlížeče, nemá žádnou speciální funkci a je nepravděpodobné, že by byl obecně stylizovaný pomocí CSS. Tato metoda je opovrhována sémantickými puristy, protože nemá pro stránku žádný kontextový význam a je tam čistě pro prezentaci. Samozřejmě v nejpřísnějším smyslu mají pravdu. Ale zvládne to práci a nikomu to neublíží.
  • Metoda přetečení závisí na nastavení vlastnosti overflowCSS na nadřazeném prvku. Pokud je tato vlastnost nastavena na autonebo hiddenna nadřazeném prvku, nadřazený prvek se rozbalí tak, aby obsahoval plováky, čímž jej efektivně vymaže pro následující prvky. Tato metoda může být krásně sémantická, protože nemusí vyžadovat další prvky. Pokud však zjistíte, že přidáváte nový, divjen abyste to použili, je stejně nesémantický jako prázdná divmetoda a méně přizpůsobivý. Mějte také na paměti, že vlastnost přetečení není speciálně určena k čištění plováků. Dávejte pozor, abyste neskrývali obsah nebo nespouštěli nechtěné posuvníky.
  • Metoda Easy Clearing (jinak známá jako „clearfix“) používá :afterk vymazání plováků chytrý CSS pseudo selector ( ). Spíše než nastavovat přetečení na rodiče, použijete na něj další třídu, například „clearfix“. Poté použijte tento CSS: 
    .clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )

    To použije malý kousek obsahu, skrytého před pohledem, za nadřazeným prvkem, který vymaže plovák. To není úplně celý příběh, protože pro starší prohlížeče je třeba použít další kód. Poznámka: Podívejte se také na tento úryvek, který sleduje nejnovější a nejlepší v clearfixech, včetně novější „micro clearfix“.

Různé scénáře vyžadují různé metody čištění plováku. Vezměte například mřížku bloků, každý z různých typů.

Abychom lépe vizuálně propojili podobné bloky, chceme začít nový řádek podle libosti, v tomto případě, když se změní barva. Mohli bychom použít metodu přetečení nebo snadné čištění, pokud každá ze skupin barev měla nadřazený prvek. Nebo použijeme metodu prázdného divu mezi každou skupinou. Tři balicí divy, které dříve neexistovaly, nebo tři po divech, které dříve neexistovaly. Nechám vás rozhodnout, co je lepší.

Problémy s plováky

Plováky jsou často křehké, protože jsou křehké. Většina této křehkosti pocházela z chyb v IE6 a IE7. Jak tyto prohlížeče ustupují do minulosti, tyto chyby spolu s nimi mizí. Stále však stojí za to jim porozumět, pokud někdy potřebujete ladit „OldIE“.

  • Pushdown je příznakem, že prvek uvnitř plovoucí položky je širší než samotný plovák (obvykle obrázek). Většina prohlížečů vykreslí obrázek mimo plovák, ale nebude mít vyčnívající část vliv na jiné rozložení. Staré verze IE rozšířily plovák tak, aby obsahoval obrázek, což často drasticky ovlivnilo rozložení. Běžným příkladem je obrázek vyčnívající z hlavního obsahu, který tlačí postranní panel dolů.

    Rychlá oprava: Ujistěte se, že nemáte žádné obrázky, které to dělají, použijte overflow: hidden;k odříznutí přebytku.

  • Double Margin Bug - Další věc, kterou si musíte pamatovat při jednání s IE 6 je, že pokud použijete marži ve stejném směru jako float, marže se zdvojnásobí. Rychlá oprava: nastavte display: inlinena plovák a nebojte se, že zůstane prvkem na úrovni bloku.
  • 3PX Jog je-li text, který je až vedle vznášel prvku záhadně odkopl od 3PX jako podivný silovým polem kolem plováku. Rychlá oprava: nastavte šířku nebo výšku ovlivněného textu.
  • V IE 7 byla chyba dolního okraje, když pokud plovoucí nadřazený prvek obsahoval podřízené prvky uvnitř, spodní okraj těchto podřízených je rodičem ignorován. Rychlá oprava: místo toho použijte nadbytečné polstrování u rodiče.

Alternativy

Pokud potřebujete obtékání textu kolem obrázků, pro float opravdu neexistují žádné alternativy. Když už mluvíme o tom, vyzkoušejte tuto poměrně chytrou techniku ​​pro zalamování textu kolem nepravidelných tvarů. Ale pro rozvržení stránky určitě existují možnosti. Eric Sol má článek o A List Apart, Faux Absolute Positioning, který popisuje velmi zajímavou techniku, která v mnoha ohledech kombinuje flexibilitu plováků se silou absolutního umístění.

CSS3 řeší rozvržení stránky několika způsoby:

  • Flexbox
  • Vícesloupcové rozložení
  • Rozvržení mřížky

Diskutovány byly absolutně umístěné plováky (např. Absolutně umístíte jako obvykle, ale prvek je stále schopen ovlivnit další prvky, například mít kolem něj zalomení textu), ale myslím, že tento nápad byl odložen kvůli podobnostem s jinými robustnějšími nápady rozložení.

Video

Před chvílí jsem udělal screencast vysvětlující mnoho z těchto konceptů float.

Příbuzný

  • clear
  • position

Více informací

  • float ve specifikaci W3C
  • float ve společnosti MDN

Podpora prohlížeče

Chrome Safari Firefox Opera TJ Android iOS
Všechno Všechno Všechno Všechno Všechno Všechno Všechno