Čím menej plávať, tým lepšie. Čo je to float value v CS: GO? Zbaliť techniky zrušenia

Podrobne popisuje vlastnosť CSS plavák, vlastnosti aplikácie a jemnosť použitia, typy umiestnenia prvkov HTML sú uvedené.

Chcem poznamenať, že pre začiatočníkov sa vyššie uvedené môže zdať mätúce a komplikované, ale uisťujem vás, že bez znalosti pravidiel vykresľovania prvkov prehliadačom sa nestanete dobrým návrhárom rozloženia. Preto vám radím, aby ste boli trpezliví.

Terminológia

Aby sme sa vyhli nejasnostiam, dohodnime sa na podmienkach.
Plavák(plávajúci prvok) - pod plavák alebo plávajúci prvok v článku znamená prvok bloku s nastavenou vlastnosťou CSS plavák — správny alebo vľavo.
Boxovanie- Termín box označuje pomyselný obdĺžnik, ktorý uzatvára každý prvok HTML. V súlade s anglickou terminológiou sa tento pomyselný obdĺžnik bude nazývať krabica.
Ak v boxe nie je príliš jasno, tak vrelo odporúčam, aby ste sa bližšie zoznámili s boxami a ich vlastnosťami v, pretože tento pojem sa v článku často používa a hlavne je základom celého HTML rozloženia.
Poznámka.Ďalej v texte sa bude vyskytovať podčiarknuté slová... Preto chcem upozorniť najmä na konkrétnu vlastnosť alebo kvalitu prvku.

Typy umiestnenia prvkov HTML

Pre prehľadnú prezentáciu vyššie uvedeného je potrebné poznať aj základné princípy zobrazovania prvkov v HTML dokumentoch.
Podľa w3.org používa WEB značkovanie tri rozloženia prvkov vo webových dokumentoch.
Normálny prietok- V CSS 2.1 normálny tok webového dokumentu obsahuje prvky reprezentované ako rámčeky, prvky naformátované ako riadkové rámčeky a relatívne umiestnenie rámčekov a rámčekov.
Inými slovami, normálny tok zahŕňa bežné prvky rozloženia, ktoré nemajú žiadnu sadu plavák rovná vľavo vpravo, alebo pozíciu rovná absolútna / pevná .
Plavák- plávajúci prvok sa najskôr umiestni v súlade s pravidlami umiestnenia do bežného toku, potom sa z tohto toku vyberie a posunie sa vo svojej línii doľava alebo doprava, pokiaľ je to možné.
Ujasnite si nasledujúce dôležité pravidlo. Keďže plávajúce prvky sú odvodené z normálneho toku dokumentu, blokové rámčeky normálneho toku ich nevidia, ale riadkové rámčeky normálneho toku ich vidia a obiehajú na jednej strane; vložené polia zahŕňajú najmä obvyklý text blokových políčok. To znamená, že ak normálne prietokové blokové boxy pri svojom umiestnení nevenujú žiadnu pozornosť prítomnosti plávajúcich boxov, potom obsah týchto boxov (inline prvkov) obteká takéto prvky.
Absolútna poloha- pri absolútnom umiestnení je krabica úplne odstránená z normálneho toku (neovplyvňuje následné) a je umiestnená vzhľadom na polohu svojej nádoby, to znamená prvku, v ktorom je umiestnená.
Trochu viac o streamoch HTML dokumentov si môžete prečítať v článku

Rozdiely medzi plavákmi a umiestnenými prvkami

Na začiatok mi pre každý prípad pripomeniem, aký je rozdiel medzi plávajúcimi ( plavák) a umiestnené ( pozíciu) prvky. Relatívne umiestnený prvok s hodnotou poloha: relatívna zostáva v normálnom toku dokumentu, ale je posunutá vzhľadom na svoju polohu, zatiaľ čo ostatné prvky nie sú ovplyvnené a zostávajú tam, kde boli. To umožňuje, aby sa relatívne umiestnené prvky prekrývali s okolitými prvkami na stránke. Ak má položka pozícia: absolútna; alebo poloha: pevná; potom sa odstráni z normálneho prúdu a umiestni sa podľa absolútnych pravidiel polohovania.
Plávajúci prvok je vždy odstránený z normálneho toku dokumentu a ovplyvňuje umiestnenie okolitých prvkov.

Teraz začnime.

Čo je float?

"Float" je jedna z vlastností CSS prvku na značenie na úrovni bloku, ktorá spôsobuje, že prvok HTML sa pohybuje úplne doľava alebo doprava, ktorý je k dispozícii na umiestnenie v kontajneri, ktorý ho obsahuje. Ak šírka kontajnera nemá dostatok miesta na aktuálnom riadku, aby sa zmestila, posunie sa na ďalší riadok, kým sa nezmestí. Všimnite si, že šírka plavák prvok je určený jeho obsahom. V závislosti od nastavenej hodnoty plavák, vložené prvky sa môžu omotať okolo takéhoto blokového prvku pozdĺž jednej z jeho horizontálnych strán.
Nehnuteľnosť plavák môže nadobudnúť nasledujúce hodnoty: žiadny(predvolené), vľavo, vpravo a dediť.

Pravidlá vykresľovania plávajúcich prvkov

Čo sa stane, keď prehliadač narazí na prvok, ktorý má vlastnosť plavák rozdielny od žiadny?
Najprv sa takýto box umiestni ako bežný prvok, potom sa odstráni z normálneho toku a posunie sa na ľavú alebo pravú stranu, kým nenarazí na rovnaký plavák prvok alebo okraj jeho nadradeného kontajnera. Ak pre prvok nezostáva dostatok horizontálneho priestoru, prehliadač ho presunie na ďalší riadok svojho kontajnera.
Pokiaľ ide o plavák položka vytiahnutá z normálneho toku, položky normálneho bloku bez nastavenej vlastnosti plavák nevedia o jeho existencii a sú umiestnené obvyklým spôsobom, každý na novom riadku. Vložené prvky označovania „pozri“ plavák box a obtekajte ho na jednej zo strán v závislosti od hodnoty - vľavo alebo správny.
Pre jasnú demonštráciu toho, čo bolo povedané, uvediem nasledujúci príklad.

Toto zobrazuje prehliadač.

Ukážka vykresľovania float prvkov

Teraz poďme zistiť, čo sa stalo. Príklad ukazuje 4 bloky, box1 a box2 sú predvolene vykreslené prehliadačom, to znamená v normálnom toku, a vnútorné prvky majú plávať = vľavo... Aby bol príklad jasnejší, pridal som do blokov farbu pozadia a výplň. Nakoniec sa teda predvolené bloky (1. a 4.) zobrazili, ako obvykle, každý na novom riadku a zaberajú celú šírku ( keďže je zobrazená snímka obrazovky označenia, šírka políčok je obmedzená šírkou obrázka). Plávajúce (2. a 3.) boli odstránené z normálneho toku (t. j. 1. a 4. box ich nevidia, preto „normálny box2“ začína pod 1. od začiatku riadku) a posunuté na ľavú hranicu kontajnera. A hoci normálne blokové boxy nevidia plávajúce boxy, vložený box posledného boxu (a toto je jeho text) vidí plávajúce boxy a obteká ich z pravej strany.
Ako vidíte, všetko je v súlade s vyššie uvedeným vykresľovacím algoritmom. plavák prvkov.

Ako sa používajú plaváky

Existujú dva hlavné spôsoby použitia nehnuteľnosti plavák.
Zvážme ich.

Omotajte text okolo obrázka.

V značkách HTML sa často používajú obrázky a len akékoľvek obdĺžnikové prvky. Vlastnosť float sa bežne používa na udržanie textu okolo nich, a nie na riadku za týmito obdĺžnikmi.

Text sa obtáča okolo obrázka s pohyblivou čiarou: vľavo

Príklad rozloženia strany s textom obaleným okolo obrázka.

CSS
img.alignleft (float: left; margin: 0 10px 10px 0)

V kóde vyššie a plávajúci prvok img a obalový text sú v tom istom kontajneri p.
Všimnite si, že výplň bola pridaná do ľavého a pravého CSS pre plávajúci prvok. Bežnou praxou je pridať medzeru medzi obrázok a okolitý text.

Rozloženie stĺpcov

Nehnuteľnosť Plavák umožňuje umiestniť dva blokové prvky vedľa seba namiesto toho, aby začínali na novom riadku. Táto vlastnosť floats je veľmi užitočná na vytváranie stĺpcov v dokumente. Na získanie rozloženia s 2 stĺpcami stačí float (t.j. nastaviť vlastnosť float) na dva DIV.
Príklad vytvorenia 2-stĺpcového rozloženia pomocou float.

Html
‹Div id =" wrapper "›
‹Div id =" ľavý stĺpec "› ‹div›
‹Div id =" pravý stĺpec "› ‹/div›
‹/Div›

CSS
# ľavý stĺpec (plávajúci: vľavo)
# pravý stĺpec (plávajúci: ľavý)

V príklade sa obe vnútorné prvky DIV vznášali doľava, výsledkom čoho boli 2 stĺpce. Mali by ste sa tiež uistiť, že celková šírka dvoch vnútorných stĺpcov (div) nepresahuje šírku nadradeného poľa, inak druhý stĺpec preskočí na novú pozíciu, pod prvý stĺpec.
Pridaním diva hlavičky cez 2 stĺpce a div päty pomocou vlastnosti jasný, získate jednoduché a krásne 2-stĺpcové rozloženie.

A ešte jedna rada. Vždy nastavte šírku plávajúceho prvku, inak môžete mať neúmyselné následky.

Prepísanie vlastnosti float

Často pri práci s plavák niekedy je potrebné, aby sa nasledujúce značkovacie prvky nenachádzali vedľa plávajúceho prúdu, ale ako obvykle na ďalšom riadku, to znamená, že sa musíte vrátiť k umiestneniu prvkov v súlade s normálnym tokom.
To sa často dosahuje používaním nehnuteľnosti jasný... Nehnuteľnosť jasný naberá na hodnotách vľavo, vpravo, obaja, nikto(predvolené) a dediť... V praxi sa používajú prvé 3 hodnoty, ktoré v drvivej väčšine prípadov využijete jasné: oboje.
Najčastejšie možno jasný sa používa na nastavenie segmentov päty pod 2 alebo 3 plávajúcimi stĺpcami.

Buď opatrný. Pri použití po plávajúcom prvku v novom poli sa pravidlá s jasný, vrátite tento box do bežného streamu, no zároveň jeho vlastnosť margin-top prestane fungovať. Často sa táto situácia napraví umiestnením prázdneho prvku div s vlastnosťou pred požadovaný box v normálnom toku jasný —

... V záujme spravodlivosti je potrebné poznamenať, že takáto technika sa považuje za technicky správnu, ale sémanticky nesprávnu, pretože sa v dokumente zobrazí prázdne div kontajner.

Plavákový kontajner

Prvá vec, ktorú musíte urobiť pri použití kontajnera na plávajúce prvky, je uistiť sa, že kontajner je dostatočne široký, aby sa prvky vedľa seba zmestili. Ak nastavíte na dva prvky vlastnosť plavák: vľavo na vytvorenie 2-stĺpcového rozloženia a celková šírka prvkov je väčšia ako šírka kontajnera, potom jeden z prvkov preskočí na ďalší riadok. Stane sa tak v dôsledku skutočnosti, že druhý stĺpec nebude mať dostatok miesta na to, aby stál v rodičovskom poli vedľa 1. stĺpca. Nižšie sú uvedené obrázky, ktoré ilustrujú podobnú situáciu.

Už sme spomenuli, že plávajúce prvky sú odstránené z normálneho toku dokumentu. To vedie k zaujímavému a mätúcemu problému, keď všetky prvky vo vnútri nádoby plávajú. To je zvyčajne prípad, keď sa v kontajneri div v hlavičke webovej stránky nachádza obrázok loga s vlastnosťou plavák: vľavo... V hlavičke tiež, zvyčajne pomocou vlastnosti obrázok na pozadí poskytuje sa akýkoľvek obrázok na pozadí. Tým sa vytvorí kontajner v normálnom toku, ktorý obsahuje plávajúci prvok a prázdny prvok v normálnom toku, pretože obrázok sa zobrazuje na pozadí. Problém je v tom, že hlavička div obsahuje iba jeden neprázdny prvok – plávajúci obrázok loga, ktorý vypadol z bežného toku. Prehliadač preto považuje div title za prázdny a nastaví jeho výšku na nulu. Často sa hovorí, že kontajner sa zrútil. Existuje niekoľko spôsobov, ako tento problém vyriešiť. Výšku prvku div kontajnera môžete explicitne nastaviť tak, aby bola aspoň výška obrázka. To bude fungovať dobre pre nadpis, ako je príklad vyššie, ale z mnohých dôvodov to nie je vždy možné. Niekedy pridajte prázdny div so súpravou vlastností jasný aby ste zabránili plávaniu nasledujúcich položiek.

Html
‹Div class =" clear "› ‹/div›

CSS
.jasné (jasné: oboje;)

To je užitočné, ak máte povolené mať nejaké biele miesto po plávajúcich prvkoch, pretože niektoré prehliadače pre prázdne divy môžu mať predvolené koncové hodnoty pre výška, okraj, výplň atď.
Existuje aj spôsob využitia nehnuteľnosti pretečeniu v nadradenom prvku. Zvyčajne používajte prepad: skrytý ale v závislosti od situácie môžete použiť prepad: auto alebo pretekať-y namiesto použitia tejto vlastnosti oboma spôsobmi. Používanie nehnuteľnosti pretečeniu chráni nadradený kontajner pred zrútením.

Problémy s plavákom

Okrem problému so zrútením kontajnera má vlastnosť float množstvo ďalších problémov.
Staršie verzie programu Internet Explorer majú chybu dvojitého odsadenia ( marža). Ak prvky prúdia rovnakým smerom a prvky sa tiež pridávajú marža v rovnakom smere (vľavo/vľavo alebo vpravo/vpravo), IE zdvojnásobí veľkosť marža... Jednoduchým riešením je nastavenie nehnuteľnosti displej: inline pre plávajúci prvok, mimochodom, táto vlastnosť pomáha zbaviť sa iných škodlivých oslíkov. Prípadne môžete použiť podmienené komentáre na nastavenie konkrétnych marža pre IE alebo pre jednotlivé verzie IE.
Ďalším problémom je pridávanie prvkov do plávajúceho prvku, kde je šírka pridaných prvkov väčšia ako šírka kontajnera. Môžete napríklad pridať obrázok do vnútra plávajúceho prvku tak, aby šírka obrázka bola väčšia ako šírka kontajnera. V závislosti od prehliadača to môže spôsobiť, že váš plavák bude širší, ako bolo zamýšľané, alebo obsah prekrýva váš obrázok. Uistite sa, že prvky vo vnútri plaváka nepresahujú šírku plaváka.
Je tu tiež problém miznutia spodnej výplne ( okraj-dole). Spodnú výplň plávajúceho prvku vo vnútri iných plavákov možno ignorovať. Riešením je použitie vypchávka namiesto marža ak sa tak stane.

Pohyblivé súčty

Pri učení CSS začiatočníci inklinujú k absolútnemu a relatívnemu umiestneniu, pretože sa zdajú jednoduchšie. Ale zvyčajne je najlepšou praxou použiť plavák. Ak si zapamätáte niekoľko kľúčových bodov, budete dobre rozumieť a ovládať plávajúce prvky vo svojich rozloženiach.

• Plávajúce prvky sa rozložia v normálnom toku dokumentu, potom sa vznášajú doľava alebo doprava v rámci nadradeného prvku a odstránia sa z bežného toku dokumentu.
• Hodnotové značky plavák automaticky sa stanú prvkami bloku.
• Blokové boxy s nainštalovaným plavák sú umiestnené vedľa seba, pokiaľ je na ne dostatok miesta. Ak v nádobe nie je dostatok miesta, objavia sa pod plávajúcimi prvkami.
• Šírka poľa s vlastnosťou set plavák určená šírkou jeho obsahu. Pri označovaní sa odporúča nastaviť plávajúcu šírku prvkov, inak môže byť výsledok nepredvídateľný, odporúčanie sa nevzťahuje na obrázky, pretože šírka je pre ne zahrnutá.
• Plávajúce a umiestnené prvky sú odlišné a správajú sa odlišne. Nemôžete použiť vlastnosti plavák a pozíciu v jednej položke.
• Ak chcete resetovať vlastnosť wrap pre nasledujúce prvky, použite vlastnosť CSS jasný.
• Plavák box je vyňatý z hlavného toku, takže blokové prvky v normálnom toku sú rozložené, ako keby tam neboli, ale inline boxy týchto prvkov uvoľňujú miesto pre plávajúci blok.
• Nádoba s výlučne plávajúcimi prvkami má nulovú výšku, od r prvky float sú vyňaté z normálneho toku, takže rodič si myslí, že je prázdny. Existujú spôsoby, ako bojovať proti tomuto efektu bez dodatočného označenia, môžete sa s nimi napríklad zoznámiť.
• Na rozdiel od prvkov hlavného prúdu, vertikálne hranice plavák boxy nie sú zlúčené s okrajmi susedných boxov.
• Nájdite pre vás najvhodnejšie riešenia na vyriešenie problémov so správnym zobrazením prvkov float v Internet Exploreri.

Dúfajme, že vyššie uvedené vám pomôžu objasniť niektoré nejasnosti pri používaní vlastností CSS. plavák.

Určuje, na ktorú stranu bude prvok zarovnaný, pričom okolo neho budú z iných strán prúdiť ďalšie prvky. Keď vlastnosť float nie je žiadna, prvok sa na stránke vykreslí ako zvyčajne, pričom jeden riadok plynulého textu môže byť na rovnakom riadku ako prvok samotný.

krátke info

Syntax

plavák: vľavo | vpravo | žiadny

Označenia

	Popis	Príklad
<тип>	Označuje typ hodnoty.	<размер>
A && B	Hodnoty musia byť zobrazené v zobrazenom poradí.	<размер> && <цвет>
A | B	Označuje, že by sa mala vybrať iba jedna z navrhovaných hodnôt (A alebo B).	normálne | malé čiapky
A || B	Každá hodnota môže byť použitá samostatne alebo v spojení s inými v ľubovoľnom poradí.	šírka || počítať
	Hodnoty skupín.	[plodina || kríž]
*	Opakujte nula alebo viackrát.	[,<время>]*
+	Opakujte jeden alebo viackrát.	<число>+
?	Zadaný typ, slovo alebo skupina sú voliteľné.	vložka?
(A, B)	Opakujte aspoň A, ale nie viac ako B-krát.	<радиус>{1,4}
#	Opakujte jeden alebo viackrát, oddelené čiarkami.	<время>#

Hodnoty

doľava Zarovná prvok doľava a všetky ostatné prvky, ako napríklad text, prechádzajú doprava. right Zarovná prvok doprava a všetky ostatné prvky budú smerovať doľava. none Nie je zadané zalomenie okolo prvku.

Pieskovisko

Macko Pú sa vždy nebránilo malému osvieženiu, najmä o jedenástej dopoludnia, pretože o tomto čase už raňajky dávno skončili a večera ani nepomyslela, že začne. A, samozrejme, strašne sa tešil, keď videl, ako Králik vyťahuje šálky a taniere.

img (float: ((playgroundValue));)

Príklad

Behaviorizmus, nech sa to zdá akokoľvek paradoxné, sublimovaný stimul osvetľuje, napríklad Richard Bandler využil zmenu submodalít na budovanie efektívnych štátov.

Výsledok tohto príkladu je znázornený na obr. 1.

Ryža. 1. Použitie vlastnosti float

Objektový model

Objekt.style.cssFloat

Poznámka

Internet Explorer 6 zaznamenáva chybu dvojitého ľavého alebo pravého výplne pre plávajúce prvky vnorené do nadradených prvkov. Polstrovanie, ktoré susedí s bokom rodiča, je zdvojené. Problém sa zvyčajne rieši pridaním display: inline do plávajúceho prvku. Tento prehliadač tiež pridáva výplň 3 pixelov (nazývanú „troj pixelová chyba“) v smere určenom hodnotou float.

Špecifikácia

Každá špecifikácia prechádza niekoľkými fázami schvaľovania.

• Odporúčanie – Táto špecifikácia bola schválená W3C a odporúča sa ako štandard.
• Odporúčanie kandidáta ( Možné odporúčanie) – skupina zodpovedná za štandard je presvedčená, že je v súlade s jeho cieľmi, ale na implementáciu štandardu je potrebná pomoc komunity vývojárov.
• Navrhované odporúčanie ( Navrhované odporúčanie) – V tomto bode je dokument predložený poradnej rade W3C na konečné schválenie.
• Pracovný návrh – Vyspelejšia verzia návrhu po diskusii a dodatkoch na posúdenie komunitou.
• Návrh redaktora ( Redakčný návrh) - návrh verzie normy po úprave editormi projektu.
• Návrh ( Návrh špecifikácie) je prvým návrhom normy.

Prehliadače

Prehliadače

V tabuľke prehliadača sa používajú nasledujúce konvencie.

Popis

Určuje, na ktorú stranu bude prvok zarovnaný, pričom okolo neho budú z iných strán prúdiť ďalšie prvky. Keď vlastnosť float nie je žiadna, prvok sa na stránke vykreslí ako zvyčajne, pričom jeden riadok plynulého textu môže byť na rovnakom riadku ako prvok samotný.

Syntax

plavák: vľavo | vpravo | žiadne | dediť

Hodnoty

doľava Zarovná prvok doľava a všetky ostatné prvky, ako napríklad text, prechádzajú doprava. right Zarovná prvok doprava a všetky ostatné prvky budú smerovať doľava. none Nie je zadané žiadne obtekanie okolo prvku. zdediť Zdedí hodnotu od rodiča.

HTML5 CSS 2.1 IE 9 Kr 15 Op 11 Sa 5 Fx 8

Výsledok tohto príkladu je znázornený na obr. 1.

Ryža. 1. Použitie vlastnosti float

Objektový model

document.getElementById ("elementID") .style.styleFloat

document.getElementById ("elementID") .style.cssFloat

Prehliadače

Internet Explorer 6 zaznamenáva chybu dvojitého ľavého alebo pravého výplne pre plávajúce prvky vnorené do nadradených prvkov. Polstrovanie, ktoré susedí s bokom rodiča, je zdvojené. Problém sa zvyčajne rieši pridaním display: inline do plávajúceho prvku. Tento prehliadač tiež pridáva výplň 3 pixelov (nazývanú „troj pixelová chyba“) v smere určenom hodnotou float.

Internet Explorer do verzie 7.0 vrátane nepodporuje zdedenú hodnotu.

Pred pár rokmi, keď vývojári prvýkrát začali prechádzať na HTML bez tabuliek, vlastnosť CSS float zrazu nadobudla veľmi dôležitú úlohu. Dôvodom, prečo sa float stal tak bežným, bolo to, že v predvolenom nastavení sa prvky bloku nezoraďovali vedľa seba vo formáte založenom na stĺpcoch. Keďže stĺpce sa vyžadujú prakticky v každej schéme CSS, táto vlastnosť si zvykla – a dokonca sa aj zneužívala.

Nehnuteľnosť float v CSS, umožňuje vývojárom zahrnúť stĺpce podobné tabuľkám do značiek HTML bez použitia tabuliek. Ak nie pre nehnuteľnosť plavák potom by rozloženia CSS neboli možné inak ako pomocou absolútneho a relatívneho umiestňovania – čo by bolo nedbalé a rozloženie by bolo nepohodlné na údržbu.

V tomto článku vám povieme, čo je majetok plavák a ako ovplyvňuje prvky v konkrétnych kontextoch... Zdôrazníme tiež niektoré rozdiely, ktoré môže mať táto vlastnosť v najbežnejšie používaných prehliadačoch. Na záver predvedieme niekoľko praktických aplikácií nehnuteľnosti plavák... Mala by tiež poskytnúť komplexnú a dôkladnú diskusiu o tejto vlastnosti a jej vplyve na vývoj CSS.

Definícia a syntax vlastnosti CSS Float

Účelom vlastnosti float je posunúť prvok bloku doľava alebo doprava, čím sa odstráni z toku dokumentu. To umožňuje, aby sa tečúci obsah prirodzene ovinul okolo plávajúceho prvku. Tento koncept je podobný tomu, čo vidíte každý deň v tlači, kde sú fotografie a iné grafické prvky zarovnané na obe strany a obsah (zvyčajne text) prirodzene prúdi okolo prvku zarovnaného okolo ľavého alebo pravého okraja.

Na obrázku vyššie je sekcia „Čitatelia stránok“ časopisu .net s 3 fotografiami čitateľov zarovnanými vľavo v stĺpcoch s obtekaním textu okolo obrázkov. Toto je základná myšlienka vlastnosti float v rozložení CSS a demonštruje jeden spôsob, ktorý sa používa v tabuľkovom dizajne.

Efektívnosť používania plavákov vo viacstĺpcovom rozložení vysvetlil Douglas Bowman v roku 2004 vo svojej klasickej prezentácii No More Tables:

Bowman vysvetlil princípy rozloženia bez tabuliek, pričom ako referenciu použil starú stránku spoločnosti Microsoft. Float bol nápadne použitý v jeho falošnom redizajne značiek Microsoftu.

Syntax

Vlastnosť Float môže nadobúdať jednu zo 4 hodnôt: vľavo (vľavo), vpravo (vpravo), bez zarovnania (žiadne) a zdedené (zdediť). Toto je deklarované tak, ako je uvedené v kóde nižšie:

#sidebar (plávajúci: vľavo;)

#sidebar ( plavák: vľavo;

Najčastejšie používané hodnoty sú vľavo a vpravo. Žiadna alebo počiatočná plávajúca hodnota pre akýkoľvek prvok na stránke HTML je predvolená. Zdediť hodnotu, ktorú možno použiť na takmer každú vlastnosť CSS, nefunguje vo verziách prehliadača Internet Explorer vrátane verzie 7.

Vlastnosť float nevyžaduje aplikovanie žiadnej inej vlastnosti na prvok float, ale aby fungoval správne, bude float za určitých okolností fungovať efektívnejšie.

Vo všeobecnosti by mal mať plávajúci prvok explicitne nastavenú šírku(pokiaľ nejde o nahradený prvok, napr. obrázok). To zaisťuje, že sa plavák bude správať podľa očakávania a pomáha predchádzať problémom v niektorých prehliadačoch.

#sidebar (plávajúci: vľavo; šírka: 350px;)

#sidebar ( plavák: vľavo; šírka: 350px;

Vlastnosti plávajúcich prvkov

Nižšie je uvedený zoznam správania plávajúcich prvkov podľa špecifikácie CSS2:

Ľavý plávajúci rámček bude posunutý doľava k jeho ľavému okraju (alebo k okraju okraja, ak nie je žiadny okraj), pričom sa bude dotýkať buď okraja obsahu poľa, alebo okraja iného plávajúceho poľa.

Ak veľkosť plávajúceho bloku presahuje dostupný horizontálny priestor, plávajúci blok sa posunie nadol

Neumiestnené, neplávajúce blokové prvky pôsobia ako plávajúce prvky, t.j. je mimo toku dokumentov

Okraje plávajúceho bloku nebudú zarovnané s okrajmi susedných blokov

Koreňový prvok ( ) nemožno vznášať

Vložený prvok, ktorý je plávajúci, sa skonvertuje na prvok bloku

Plávať v praxi

Najbežnejšie používaným prípadom použitia vlastnosti float je plávajúci obrázok s obtekaním textu. Napríklad:

Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.

Donec non enim pri facilisis turpis pulvinar. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

CSS aplikované na obrázok v poli vyššie vyzerá takto:

img (float: left; margin: 0 15px 5px 0; border: solid 1px #bbb;)

img ( plavák: vľavo; okraj: 0 15px 5px 0; border: solid 1px #bbb;

Jedinou vlastnosťou, ktorá môže dosiahnuť tento efekt, je vlastnosť float. Ostatné vlastnosti (okraj a okraj) sú tam z estetických dôvodov. Ostatné prvky v bloku (tagy

S textom v nich) nepotrebujú žiadne štýly.

Ako už bolo spomenuté, plávajúce prvky sú vyradené z toku dokumentu a ostatné prvky bloku zostávajú v toku, pričom sa správajú, akoby tam plávajúci prvok ani nebol. Toto je vizuálne znázornené nižšie:

Toto pole je plávajúce doľava

Toto

Prvok má inú farbu pozadia, aby bolo zrejmé, že presahuje šírku svojho rodiča, pričom sa ignoruje plávajúci prvok. Tento vložený text sa však obtáča okolo plávajúceho rámčeka.

Vo vyššie uvedenom príklade

prvok na úrovni bloku, takže ignoruje plávajúci prvok, ktorý presahuje šírku kontajnera (mínus výplň). Všetky neplávajúce prvky typu blok sa budú správať podobne.

Text v odseku je vložený, takže sa obtáča okolo plávajúceho prvku. Plávajúcemu bloku sú priradené aj parametre okraja, aby bol odsadený od odseku, čím je vizuálne jasný, takže prvok odseku ignoruje pohyblivý blok.

Čistenie plavákov

Problémy s polohovaním plávajúcich prvkov sa zvyčajne riešia pomocou vlastnosti clear CSS, ktorá vám umožňuje „vyčistiť“ plávajúce prvky na ľavej alebo pravej strane alebo na oboch stranách.

Pozrime sa na bežný príklad – päta sa obopína okolo pravej strany označenia 2 klonov:

Ľavý stĺpec sa vznášal doľava

Ak sa pozriete na stránku IE6 a IE7, neuvidíte žiadne problémy. Ľavý a pravý stĺpec sú na svojom mieste a päta je naspodku. Ale v prehliadačoch Firefox, Opera, Safari a Chrome uvidíte, že päta sa posúva mimo. Je to spôsobené aplikovaním plavákov na stĺpce. Toto je správne správanie, aj keď je problematickejšie. Na vyriešenie tohto problému používame vyššie uvedenú vlastnosť clear, relatívne k päte:

#footer (jasné: oboje;)

#footer ( jasné: oboje;

Výsledok je uvedený nižšie:

Ľavý stĺpec sa vznášal doľava

Pravý stĺpec sa tiež vznášal doľava

Vlastnosť clear vymaže iba plávajúce prvky, takže použitie clear: oba stĺpce nespôsobí pokles päty, pretože päta nie je pohyblivý prvok.

Vlastnosť clear vymaže iba plávajúce prvky. Použitie clear spočíva v tom, že oba stĺpce nevynechajú pätu, pretože nejde o plávajúci prvok.

Preto použite clear na neplávajúcich prvkoch a niekedy aj na plávajúcich prvkoch, aby prvky stránky zaujali svoje miesto.

Uzamknutie rodiča

Jednou z najbežnejších funkcií float markup je „odpadnutie“ rodiča. Toto je demonštrované na príklade nižšie:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Všimnite si, že spodná časť plávajúceho obrázka sa zobrazuje mimo svojho rodiča. Rodič nie je úplne rozbalený, aby obsahoval plávajúci obrázok. Je to spôsobené tým, o čom sme hovorili skôr: plávajúci prvok je mimo prirodzeného toku dokumentu, hoci sú zobrazené všetky prvky bloku, ale plávajúci prvok tam nie je. Toto nie je chyba CSS, všetko je v súlade so špecifikáciami CSS. Všetky prehliadače robia v tomto príklade to isté. Musím povedať, že v tomto príklade pridanie šírky kontajnera môže zabrániť problému v IE, ale problém je potrebné vyriešiť aj pre Firefox, Opera, Safari alebo Chrome.

Riešenie 1: Plavák pre nádobu

Najjednoduchší spôsob, ako vyriešiť tento problém, je vzniesť nadradený prvok:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Kontajner sa teraz rozširuje, aby sa doň zmestili všetky jeho deti. Bohužiaľ, táto oprava bude fungovať iba v obmedzenom počte prípadov, pretože plávajúci rodič môže mať nežiaduce účinky na vaše rozloženie.

Riešenie 2: Pridanie dodatočnej značky

Toto je zastaraná metóda, ale jednoduchšia možnosť. Stačí pridať extra prvok na dno nádoby a "vyčistiť". Takto bude HTML vyzerať po implementácii tejto metódy:

XHTML

"//media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/lifesaver.jpg"šírka = "200" výška = "222" alt = "" /> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

V dôsledku toho sa CSS použije na nové prvky:

Clearfix (jasné: oboje;)

Clearfix ( jasné: oboje;

Môžete to urobiť aj pomocou
tag s aktívnym štýlom. V každom prípade získate požadovaný výsledok: nadradený kontajner sa rozšíri tak, aby zahŕňal všetky jeho podriadené položky. Táto metóda sa však neodporúča, pretože do vášho označenia pridáva nesémantický kód.

Riešenie 3: pseudoprvok za

Pseudoprvok: after pridá prvok do vykreslenej stránky HTML. Táto technika sa vo veľkej miere používa na riešenie problémov s čistením plaváka. Takto vyzerá CSS:

Clearfix: po (obsah: "."; Displej: blok; výška: 0; jasný: oboje; viditeľnosť: skryté;)

Clearfix: po ( obsah: "." ; displej: blok; výška: 0; jasné: oboje; viditeľnosť: skryté;

Trieda CSS „clearfix“ sa vzťahuje na akýkoľvek kontajner, ktorý má plávajúce deti a nerozšíri sa tak, aby ich zahŕňal.

Táto metóda však nefunguje pre Internet Explorer pred verziou 7, takže pre IE musíte použiť jednu z nasledujúcich možností:

Clearfix (zobrazenie: inline-block;). Clearfix (zoom: 1;)

Clearfix ( displej: inline-block; Clearfix ( priblíženie: 1;

V závislosti od typu problému máte do činenia s jedným z dvoch riešení, ktoré problém vyriešia v programe Internet Explorer. Je potrebné poznamenať, že vlastnosť zoom nie je štandardnou vlastnosťou spoločnosti Microsoft, a preto sa váš CSS stane neplatným.

Keďže pseudoelement: after nefunguje v IE6 / 7, dostávame trochu nafúknutý a zložitý kód a vyžaduje sa dodatočný štýl, ktorý nie je platný len pre IE, takže toto riešenie nie je najlepší spôsob, ale pravdepodobne najlepší, aký sme uvažovali.

Riešenie 4: Vlastnosť pretečenia

Zďaleka najlepším a najjednoduchším spôsobom, ako vyriešiť problém s vypadnutím rodiča, je pridať do nadradeného prvku overflow: hidden alebo overflow: auto. Je prehľadný, ľahko sa udržiava, funguje takmer vo všetkých prehliadačoch a nepridáva zbytočné značky.

Všimnite si, že som povedal "takmer" vo všetkých prehliadačoch. Je to preto, že to nefunguje v IE6. V mnohých prípadoch však bude mať nadradený kontajner nastavenú šírku, ktorá problém v IE6 rieši. Ak nadradený kontajner nemá žiadnu šírku, môžete pridať štýl iba pre IE6 s nasledujúcim kódom:

// Táto oprava je len pre IE6 .clearfix (výška: 1%; pretečenie: viditeľné;)

// Táto oprava je len pre IE6 Clearfix ( výška: 1 %; prepad: viditeľný;

V IE6 je vlastnosť height nesprávne chápaná ako min-height, takže to núti kontajner zahrnúť svojich potomkov. Vlastnosť Overflow sa potom nastaví späť na „viditeľné“, aby sa zabezpečilo, že obsah nebude skrytý ani sa nebude posúvať.

Jedinou nevýhodou použitia metódy pretečenia (v akomkoľvek prehliadači) je možnosť, že obsah prvku bude mať posuvníky alebo skryje obsah. Ak sú v nadradenom prvku nejaké prvky so zápornými okrajmi alebo absolútnym umiestnením, budú skryté, ak prekročia hranice nadradeného prvku, preto by sa táto metóda mala používať opatrne. Treba tiež poznamenať, že ak by obsiahnutý prvok mal špecifikovanú výšku alebo minimálnu výšku, určite by ste nemohli použiť metódu pretečenia.

Nie je teda naozaj jednoduché problém prezerať v rôznych prehliadačoch. Ale takmer každý problém čistenia plaváka môže byť vyriešený jednou z vyššie uvedených metód.

Float súvisiace chyby v Internet Exploreri

V priebehu rokov bolo na webe uverejnených množstvo článkov, ktoré diskutovali o bežných chybách v označovaní CSS. Všetky, neprekvapivo, riešia problémy špecifické pre Internet Explorer. Nižšie nájdete zoznam odkazov na množstvo článkov, ktoré pojednávajú o problémoch súvisiacich s plávaním:

Zmena vlastnosti float pomocou JavaScriptu

Ak chcete zmeniť hodnotu CSS v JavaScripte, musíte získať prístup k štýlu objektu prevedením zamýšľanej vlastnosti CSS na „Camel case“ Napríklad vlastnosť CSS „margin-left“ sa zmení na marginLeft, vlastnosť background-color sa zmení na BackgroundColor atď. na. Ale s vlastnosťou float je to iné, pretože slovo float je už v JavaScripte vyhradené. Preto nasledujúce bude nesprávne:

Štýl. styleFloat = "vľavo";

// Pre všetky ostatné prehliadače

myDiv. štýl. cssFloat = "vľavo";

Praktické využitie Floatu

Floaty možno použiť na vyriešenie rôznych problémov v označovaní CSS. Niektoré príklady sú popísané tu.

2-stĺpové, pevná šírka

3 stĺpce, rozloženie rovnakej výšky

Plávajúci obrázok s názvom.

Podobne ako to, o čom sme hovorili skôr v časti „Float in Practice“, Max Design popisuje, ako plávať s obrázkom s názvom, ktorý umožňuje, aby sa okolo neho text prirodzene zalomil.

Horizontálna navigácia s neusporiadanými zoznamami

Vlastnosť float je kľúčovým komponentom pri kódovaní horizontálnych navigačných panelov založených na sprite. Chris Spooner z Line25 popisuje, ako vytvoriť menu úžasnosti, ktoré označí

podržaním navigačných tlačidiel použite float: vľavo:

Aby sme demonštrovali dôležitosť vlastnosti float v tomto príklade, tu je snímka obrazovky toho istého obrázka po použití firebug na odstránenie float: left:

Mriežkové fotogalérie

Jednoduché použitie vlastnosti float je plávať: ponechajte sériu fotografií obsiahnutú v nezoradenom zozname, čím získate rovnaký výsledok, aký môžete vidieť v rozložení tabuľky.

Predovšetkým kanadská produktová stránka (pozri obrázok vyššie) zobrazuje svoje produkty vo formáte mriežky vedľa bočného panela. Fotografie sa zobrazujú ako neusporiadaný zoznam s vlastnosťou float pre všetkých

prvky sú nastavené na plávajúcu: doľava. Funguje to lepšie ako mriežka, pretože počet fotografií v galérii sa môže zmeniť a označenie nebude ovplyvnené.

Stránka futonov spoločnosti Paragon Furniture (pozri obrázok vyššie) má ďalší príklad stránky produktu s neusporiadaným zoznamom s pohyblivými značkami

.

Stránka s výsledkami vyhľadávania iStockphoto (pozri obrázok vyššie) má tiež mriežku štruktúrovaných fotografií, tu fotografie obsahujú plávajúcu čiaru: vľavo

značky, nie

značky.

Zarovnanie polia s tlačidlom

Modelovanie predvolených prvkov formulára pre rôzne prehliadače môže byť problematické. Často je potrebné zadať do jedného poľa formulára, ako je napríklad vyhľadávací formulár položku vedľa tlačidla odoslať.

V modernom web dizajne, nehnuteľnosť plavák používané takmer na každom kroku. Ale napriek tejto prevalencii nie každý chápe mechanizmus fungovania plávajúcich blokov, ich správanie a aké dôsledky môže mať ich použitie.

Čo je to "float"?

Plavák je to vlastnosť umiestnenia CSS. Aby ste pochopili jeho podstatu a pôvod, musíte obrátiť svoju pozornosť na dizajn tlače. V tlačených rozloženiach je možné obrázok umiestniť tak, aby okolo neho text obtekal. Toto sa zvyčajne nazýva " obtekanie textu".

V rozložení stránky je možné špecifikovať blok, ktorý obsahuje text, ktorý sa má použiť zalomiť text okolo obrázka alebo ignorujte balenie. Ignorovanie zalamovania textu umožní slovám pretekať cez obrázok, ako keby tam nebolo. To je rozdiel, či je obrázok súčasťou toku na stránke alebo nie. Vo webdizajne je všetko veľmi podobné.

Vo webdizajne sa naň vzťahuje prvok s vlastnosťou CSS plavák sa bude správať ako obrázok s textom obaleným v tlačenom rozložení. Plávajúce prvky zostávajú súčasťou toku webovej stránky. To vôbec nie je to isté ako absolútne umiestnené prvky, ktoré sú odstránené z toku, ako keby v rozložení tlače dostal textový blok pokyn ignorovať obtekanie okolo obrázka. Absolútne umiestnené prvky nemajú vplyv na umiestnenie iných prvkov a ostatné prvky nemajú vplyv na ich umiestnenie.

Nastavenie vlastnosti plavák pre prvky používajúce CSS vyzerá takto:

#sidebar (plávajúci: vpravo;)

Pre vlastnosť sú platné štyri hodnoty plavák - vľavo, správny, žiadny, dediť... prvé dve, vľavo a správny označujú smery umiestnenia - vľavo a vpravo. žiadne- predvolená hodnota, označuje, že prvok nie je plávajúci a dediť pokyn prvku, aby zdedil hodnotu vlastnosti plavák z rodičovského prvku.

Na čo sa plavák používa?

Okrem jednoduchého príkladu obtekania textu okolo obrázka, plavák možno použiť na vytváranie webových rozložení.

Plavák, užitočné aj pre malé prvky rozloženia. Vezmime si napríklad tento malý úryvok webovej stránky. Ak nastavíme vlastnosť plavák pre malý obrázok avatara, keď sa veľkosť obrázka zmení, obal sa zmení v súlade s novými rozmermi obrázka:

Rovnaké rozloženie je možné implementovať pomocou relatívneho umiestnenia kontajnera a absolútneho umiestnenia avatara a textu v ňom. V rozložení implementovanom podľa tejto schémy však zmena veľkosti obrázka neovplyvní textový blok, pretože prvky s absolútnym umiestnením neovplyvňujú ostatné prvky a iné prvky ich neovplyvňujú.

Resetovať obal

jasný súvisiaci majetok s majetkom plavák... Prvok s vlastnosťou set jasný sa neposunie nahor, keď obteká prvok s nastavenou vlastnosťou plavák ale bude plávať dole ignorujúc obal. A opäť ilustrácia, ktorá všetko bez ďalšieho vysvetlí.

Vo vyššie uvedenom príklade sa bočný panel vznášal napravo od bloku hlavného obsahu. Päta sa presunula na prázdne miesto pod bočným panelom a obopínala blok hlavného obsahu. Ak chcete tento problém obísť, musíte zadať hodnotu pre vlastnosť clear: both "päty", aby sa "vymazalo" obtekanie okolo oboch stĺpcov.

#footer (jasné: oboje;)

Nehnuteľnosť jasný má štyri významy. Obaja slúži na resetovanie obalu v oboch smeroch. Vľavo a Správny slúžia na resetovanie jedného smeru – vľavo alebo vpravo, resp. žiadne je predvolená hodnota. dediť môže byť 5. hodnota, ale prekvapivo nie je podporovaná internet Explorer... Resetovanie iba ľavého alebo pravého toku je pomerne zriedkavé, ale má praktické výhody.

Veľký kolaps

S jednou vecou plavák záhadou je, aký vplyv má táto vlastnosť na nadradené prvky. Ak nadradený prvok neobsahuje žiadne iné prvky ako plavák, jeho výška sa doslova zrúti. Nie je to vždy badateľné, najmä ak rodič nemá nápadné zázemie, no je dôležité mať to na pamäti.

Ale alternatíva k takémuto kolapsu je ešte horšia. Zvážte nasledujúci scenár:

Ak sa horné pole automaticky rozšíri, aby sa do neho zmestil plávajúci prvok, dôjde k prerušeniu toku textu medzi odsekmi bez možnosti jeho odstránenia. Ak by to tak bolo, vývojári by sa oveľa častejšie sťažovali na toto správanie plávajúcich blokov ako na kolaps teraz.

Zbalenie by ste mali mať vždy na pamäti, aby ste predišli podivnému správaniu sa rozloženia a problémom s rôznymi prehliadačmi. Tento problém môžeme vyriešiť pomocou jasný po plávajúcom prvku v nádobe, ale pred uzavretím nádoby.

Zbaliť techniky zrušenia

Ak ste v situácii, keď viete, kde bude ďalší prvok, môžete použiť jasné: oboje a pustiť sa do svojej práce. To je ideálne, pretože nevyžaduje žiadne hacky ani ďalšie prvky. Ale bohužiaľ, zvyčajne nie všetko ide tak, ako chceme, a v tomto prípade môžete použiť nasledujúce nástroje.

Metóda prázdneho bloku.

Je to doslova prázdny blok.

... Niekedy môžete nájsť prvok
alebo akýkoľvek iný náhodný prvok, ale div je najbežnejší, pretože nemá žiadny predvolený štýl v prehliadačoch, nemá žiadnu špeciálnu funkciu a je nepravdepodobné, že bude vo všeobecnom štýle CSS. Túto metódu sémantickí puristi odmietajú, pretože jej prítomnosť nemá na stránke žiadny kontextový význam a slúži len na vzhľad. Samozrejme, v prísnom zmysle slova majú pravdu, ale on si robí svoju prácu a nikomu neubližuje.

Metóda pretečenia.

Na základe špecifikácie vlastnosti CSS pretečeniu pre nadradený prvok. Ak je táto vlastnosť nastavená na auto alebo skryté pre nadradený prvok, potom sa rozšíri po plávajúcom prvku, čím sa uvoľní plavák okolo neho pre nasledujúce prvky. Táto metóda môže byť sémanticky krásna, pretože nevyžaduje ďalšie prvky. Ako však vidíte, pridali sme nový div použiť túto metódu, ktorá je ekvivalentná použitiu nesémantického prázdneho bloku a je menej flexibilná. Treba tiež pripomenúť, že nehnuteľnosť pretečeniu nie je určený na zakázanie balenia. Dávajte pozor, aby ste omylom neskryli obsah alebo nespôsobili nechcené posúvanie.

Jednoduchá metóda čistenia.

Používa pseudoselektor CSS (: after) na odstránenie zalamovania. Namiesto užívania nehnuteľnosti pretečeniu pre nadradený prvok nastavte preň ďalšiu triedu, napríklad „clearfix“ a použite nasledujúci štýl CSS:

Clearfix: po (obsah: "."; Viditeľnosť: skryté; zobrazenie: blok; výška: 0; jasné: obe;)

Používa malý kúsok obsahu, ktorý je skrytý, nachádza sa za nadradeným prvkom, ktorý odstraňuje obal. Táto metóda nie je úplná, pretože podpora starších prehliadačov musí byť nákladná.

Rôzne situácie vyžadujú rôzne spôsoby resetovania plaváka. Vezmime si ako príklad mriežku rôznych typov blokov.

Pre lepšiu vizuálnu integráciu podobných blokov musíme pri zmene farby začať nový riadok. Môžeme použiť metódu overflow alebo light clear, ak má každá skupina farieb rodiča. Alebo použite metódu prázdnych blokov medzi skupinami. Tri rodičovské bloky, ktoré predtým neexistovali, alebo tri prázdne bloky, ktoré predtým neexistovali. Je na vás, aby ste sa rozhodli, ktorá metóda je najlepšia.

Problémy s plávajúcimi prvkami

Plávajúce prvky sú často kritizované za ich krehkosť. Veľká časť tejto krehkosti pochádza z IE6 a jeho ploštice orientované na plavák... Ale keďže čoraz viac vývojárov upúšťa od podpory IE6, nemusíte o tom premýšľať, no pre tých, ktorým záleží na kompatibilite, tu je krátky zoznam.

Tlačiť dole, je príznakom toho, že prvok vo vnútri plávajúceho rámčeka je širší ako tento rámček (zvyčajne sa to stáva pri obrázkoch). Väčšina prehliadačov zobrazí vyčnievajúcu časť plávajúceho prvku, čo však neovplyvní rozloženie. IE rozšíri plávajúci rámček a často má drastický vplyv na rozloženie. Typickým príkladom je obrázok, ktorý vyčnieva z bloku hlavného obsahu a tlačí bočný panel smerom nadol.

Rýchle riešenie problému: použitie pretečenia: skryté; odrezať prebytok.

Chyba s dvojitým okrajom je ďalšia vec, ktorú treba mať na pamäti pri práci s IE6. Táto chyba je vyjadrená v tom, že ak je pole na tej istej strane, kde je orientované plavák, pole je dvojnásobné. Napríklad:

Dostaneme ľavý okraj 40 px., namiesto 20 px.

Rýchle riešenie problému: nastavenie zobrazenia: inline pre plávajúci blok a nebojte sa, prvok zostane blokovaný.

3px Jog... Podstatou tejto chyby je, že text nachádzajúci sa vedľa plávajúceho prvku je podivne posunutý o tri pixely, akoby pod vplyvom silového poľa umiestneného okolo plávajúceho prvku. Rýchle riešenie problému: Nastavte šírku a výšku ovplyvneného textu.

V IE7 sa objaví Chyba na spodnom okraji keď sa rodič vznáša a jeho rodič sa tiež vznáša. Prvok predka ignoruje okraj dieťaťa. Rýchle riešenie problému: Použite padding-bottom na rodičovi namiesto podradenej margin-bottom.