floatNehnuteľnosť v CSS sa používa na určovanie polohy a usporiadanie na webových stránkach.
.module ( float: left; )Hodnoty
none: prvok sa nevznáša. Toto je počiatočná hodnota.left: pláva s prvkom naľavo od jeho nádoby.right: plavecký prvok vpravo od jeho nádoby.inherit: prvok dedí smer plaváku po svojom rodičovi.
display: block;
Čo znamená Float?
Aby sme pochopili účel a pôvod float, môžeme sa pozrieť na tlačený dizajn. V rozložení pri tlači môžu byť obrázky vložené na stránku tak, aby sa okolo nich podľa potreby obaloval text. Toto sa bežne a vhodne nazýva „zalomenie textu“. Tu je príklad toho.
V programoch na rozloženie stránky možno povedať, že polia, v ktorých je uložený text, majú rešpektovať zalamovanie textu alebo ho ignorovať. Ignorovanie zalamovania textu umožní slovám tiecť priamo cez obrázok, akoby tam ani nebol. To je rozdiel medzi tým, či je obrázok súčasťou toku stránky (alebo nie). Webový dizajn je veľmi podobný.
Vo webovom dizajne sú prvky stránky s floataplikovanou vlastnosťou CSS rovnaké ako obrázky v rozložení tlače, kde okolo nich prúdi text. Plávajúce prvky zostávajú súčasťou toku webovej stránky. Toto sa výrazne líši od prvkov stránky, ktoré používajú absolútne umiestnenie. Absolútne umiestnené prvky stránky sa z toku webovej stránky odstránia , ako keď sa v textovom poli v rozložení tlače zobrazilo príkaz na ignorovanie zalamovania stránky. Absolútne umiestnené prvky stránky nebudú mať vplyv na polohu ostatných prvkov a ostatné prvky na ne nebudú mať vplyv, bez ohľadu na to, či sa navzájom dotýkajú alebo nie.
Ukážka
Táto ukážka zobrazuje článok s dvoma obrázkami: jedným nastaveným na float: lefta druhým nastaveným na float: right. Stlačením tlačidla „prepínať plaváky“ plaváky vypínate a zapínate.
Pozrite si ukážku Pen Float od CSS-Tricks (@ css-tricks) na CodePen.
Plaváky pre rozloženie
Okrem jednoduchého príkladu zalamovania textu okolo obrázkov možno pomocou plavákov vytvoriť celé webové rozloženie .
Plaváky sú tiež užitočné pri rozložení v menších prípadoch. Vezmime si napríklad túto malú oblasť webovej stránky. Ak použijeme floatpre svoj obrázok avatara, pri zmene veľkosti tohto obrázka sa text v poli zmenší, aby sa do neho zmestil:
Rovnaké usporiadanie je možné dosiahnuť použitím relatívneho umiestnenia na kontajneri a absolútneho umiestnenia tiež na avatarovi. Ak by sa to však stalo, avatar by text neovplyvnil a nebol by schopný zmeny veľkosti zmeniť.
Ukážka
Táto ukážka zobrazuje avatara s float: leftpoužitým. Stlačením tlačidla „Prepnúť veľkosť obrázka“ zobrazíte širšiu verziu obrázka avatara. Všimnite si, že text sa prefarbí, aby sa prispôsobil obrázku, namiesto aby prebehol po obrázku.
Prezrite si ukážku Pen Float Demo od CSS-Tricks (@ css-tricks) na CodePen.
Čistenie plaváka
Floatov sesterský majetok je clear. Prvok, ktorý má nastavenú clearvlastnosť, sa nebude pohybovať hore vedľa plaváka, ako si to želá plavák, ale bude sa pohybovať sám nadol za plavákom. Ilustrácia je opäť užitočnejšia ako slová:
Vo vyššie uvedenom príklade je bočný panel pohyblivý vpravo a je kratší ako hlavná oblasť obsahu. Päta potom musí vyskočiť do tohto dostupného priestoru, ako to vyžaduje plavák. Ak chcete tento problém vyriešiť, pätu je možné vyčistiť, aby sa zabezpečilo, že zostane pod oboma plávajúcimi stĺpcami.
#footer ( clear: both; )Clear má tiež štyri platné hodnoty. Hodnota bothsa najčastejšie používa, ktorý odstráni plaváky prichádzajúce z oboch smeroch. Hodnoty lefta rightje možné použiť na vyčistenie plaváka iba z jedného smeru. Počiatočná hodnota je none, čo je zvyčajne zbytočné, pokiaľ sa nepoužije na výslovné odstránenie nastavenej clearhodnoty. Táto hodnota inheritspôsobí, že element dedí hodnotu svojho rodiča clear. Je čudné, že Internet Explorer nepodporoval túto hodnotu až do IE8.
Čistenie iba leftalebo rightplaváka, aj keď je vo voľnej prírode menej bežné, má určite svoje využitie.
Veľký kolaps
Jednou z zarážajúcich vecí na práci s plavákmi je to, ako môžu ovplyvniť prvok, ktorý ich obsahuje (ich „nadradený“ prvok). Ak nadradený prvok neobsahuje nič iné ako plávajúce prvky, jeho výška sa zrúti na nič. Nie je to vždy zrejmé, ak rodič neobsahuje žiadne vizuálne viditeľné pozadie, je však potrebné si to uvedomiť.
Aj keď sa zrútenie môže zdať neintuitívne, alternatíva je horšia. Zvážte tento scenár:
Ak by sa blokový prvok na vrchu mal automaticky roztiahnuť, aby sa do neho zmestil plávajúci prvok, došlo by k neprirodzenému prerušeniu medzery v toku textu medzi odsekmi bez praktického spôsobu jeho opravy. Keby to tak bolo, my dizajnéri by sme sa na toto správanie sťažovali oveľa ťažšie ako na zrútenie.
Kolaps je takmer vždy potrebné vyriešiť, aby sa zabránilo podivnému rozloženiu a problémom s rôznymi prehliadačmi. Opravíme to vyčistením plaváka po plávajúcich prvkoch v nádobe, ale pred uzavretím nádoby.
Techniky čistenia plavákov
Ak sa nachádzate v situácii, keď vždy viete, čo bude nasledujúcim prvkom, môžete použiť clear: both;hodnotu tohto prvku a venovať sa svojej práci. To je ideálne, pretože nevyžaduje žiadne fantázie a žiadne ďalšie prvky, vďaka čomu je dokonale sémantický. Samozrejme veci zvyčajne tak nefungujú a my musíme mať v paneli nástrojov viac nástrojov na čistenie float.
- Metóda Empty Div je doslova prázdna div.
- Metóda pretečenia sa spolieha na nastavenie vlastnosti
overflowCSS na nadradený prvok. Ak je táto vlastnosť nastavená naautoalebohiddenna nadradenom prvku, nadradený sa rozšíri tak, aby obsahoval plaváky, čím ho efektívne vyčistí pre nasledujúce prvky. Táto metóda môže byť nádherne sémantická, pretože nemusí vyžadovať ďalšie prvky. Ak však zistíte, že pridávate nový,divlen aby ste to mohli uplatniť, je rovnako nemantické ako prázdnadivmetóda a menej prispôsobivý. Majte tiež na pamäti, že vlastnosť pretečenia nie je špeciálne na čistenie plavákov. Dávajte pozor, aby ste neskryli obsah alebo nespustili nechcené posuvníky. - Metóda ľahkého vymazania (inak známa ako „clearfix“) používa
:afterna vyčistenie plavákov šikovný pseudo selektor CSS ( ). Namiesto nastavenia pretečenia na rodiča použijete ďalšiu triedu, napríklad „clearfix“. Potom použite tento CSS:.clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )Toto použije malý kúsok obsahu skrytého pred pohľadom za nadradeným prvkom, ktorý vymaže plavák. Toto nie je celkom celý príbeh, pretože pre staršie prehliadače je potrebné použiť ďalší kód. Poznámka: Prezrite si tiež tento úryvok, ktorý sleduje najnovšie a najlepšie opravy clearfix, vrátane novšej verzie „micro clearfix“.
Rôzne scenáre si vyžadujú rôzne metódy čistenia plaváka. Vezmime si napríklad mriežku blokov, každý z rôznych typov.
Pre lepšie vizuálne spojenie podobných blokov chceme vytvoriť nový riadok, ako sa nám páči, v takom prípade, keď sa zmení farba. Mohli by sme použiť metódu pretečenia alebo ľahkého vyčistenia, ak by každá z farebných skupín mala nadradený prvok. Alebo medzi každou skupinou použijeme metódu prázdneho div. Tri zalamovacie prvky, ktoré predtým neexistovali, alebo tri za prvky, ktoré predtým neexistovali. Nechám vás rozhodnúť sa, čo je lepšie.
Problémy s plavákmi
Plaváky sú často krehké kvôli svojej krehkosti. Väčšina tejto krehkosti pochádzala z chýb v IE6 a IE7. Keď tieto prehliadače ustupujú do minulosti, tieto chyby spolu s nimi ubúdajú. Stále však stojí za to im porozumieť, ak niekedy potrebujete ladiť „OldIE“.
- Stlačenie nadol je príznakom toho, že prvok vo vnútri plávajúcej položky je širší ako samotný plavák (zvyčajne obrázok). Väčšina prehľadávačov vykreslí obrázok mimo plavák, ale nemá vyčnievajúcu časť, ktorá má vplyv na iné rozloženie. Staré verzie IE rozšírili plavák tak, aby obsahoval obrázok, čo často drasticky ovplyvnilo rozloženie. Bežným príkladom je obrázok, ktorý vytŕča z hlavného obsahu a tlačí bočný panel dole.
Rýchla oprava: Uistite sa, že nemáte žiadne obrázky, ktoré by to robili. Použite
overflow: hidden;na odrezanie prebytočného množstva. - Double Margin Bug - Ďalšou vecou, ktorú si treba uvedomiť pri práci s IE 6, je, že ak použijete maržu rovnakým smerom ako float, marža sa zdvojnásobí. Rýchla oprava: nastavená
display: inlinena plavák a nebojte sa, že zostane prvkom na úrovni bloku. - Krok 3px predstavuje krok, keď text, ktorý sa nachádza vedľa plaveného prvku, 3px záhadne odštartuje ako čudné silové pole okolo plaváka. Rýchla oprava: nastavte šírku alebo výšku postihnutého textu.
- V IE 7 bola chyba pri dolnom okraji, keď rodič, ktorý vznášal, pohyboval v ňom, dolný okraj týchto detí rodič ignoroval. Rýchla oprava: namiesto toho sa použije polstrovanie spodku rodiča.
Alternatívy
Ak potrebujete zalomenie textu okolo obrázkov, pre float skutočne neexistujú žiadne alternatívy. Keď už hovoríme o tom, vyskúšajte túto dosť dômyselnú techniku obalenia textu okolo nepravidelných tvarov. Ale pre rozloženie stránky určite existujú možnosti. Eric Sol má článok o A List Apart, Faux Absolute Positioning, ktorý popisuje veľmi zaujímavú techniku, ktorá v mnohých ohľadoch kombinuje flexibilitu plavákov so silou absolútneho umiestnenia.
CSS3 rieši rozloženie stránky niekoľkými spôsobmi:
- Flexbox
- Viacstĺpcové rozloženie
- Rozloženie mriežky
Diskutovalo sa o absolútne umiestnených plavákoch (napr. Úplne sa umiestnite ako obvykle, ale prvok je stále schopný ovplyvniť ďalšie prvky, napríklad obklopiť ho textom), ale myslím si, že tento nápad bol odložený z dôvodu podobnosti s inými robustnejšími nápadmi na rozloženie.
Video
Pred chvíľou som urobil screencast, ktorý vysvetľoval mnohé z týchto koncepcií typu float.
Súvisiace
clearposition
Viac informácií
floatv špecifikácii W3Cfloatna MDN
Podpora prehľadávača
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Všetky | Všetky | Všetky | Všetky | Všetky | Všetky | Všetky |