CSS Float: popis, vlastnosti

Plynulá jazda - jeden zo základných funkcií jazyka CSS (sú kaskádovými so štýlmi - formátovanie kaskádových). Tento jazyk existuje od roku 1996 a stále pokračuje v rozvoji. V tomto okamihu, vývojári použili tretiu verziu CSS. S CSS programovacieho jazyka je možné vytvoriť krásny a príjemný web, ktorý sa nezobrazí zastarané alebo nepohodlný pre užívateľov, a to aj ak ste nepoužili JavaScript. Moderná možnosti tretej verzie povolenie.

Tiež, vývojári môžu použiť vhodnejšie formátovanie možnosti, napríklad flexboxu alebo postoj k zmene prvkom priestor na miesto, ale poporiadku. Ak chcete začať chápať výhody aj nevýhody Float vlastnosti.

CSS Float - prečo je to potrebné?

Plavák - vlastnosť pre polohovacie prvky. Každý deň je možné vidieť na stránkach novín a časopisov, pri pohľade na obrázky a text, ktorý je veľmi pekne obteká okolo nich. и CSS при использовании функции Float должно произойти то же самое. Vo svete HTML a CSS kódu pomocou funkcie Float by sa malo stať to isté. Ale je potrebné pripomenúť, že pre úpravu obrázkov, nie je vždy hlavným cieľom tejto funkcie. To môže byť použitý na vytvorenie populárnej umiestnenie prvkov stránok v dvoch, troch, štyroch stĺpcoch. V skutočnosti je nehnuteľnosť Float CSS sa používa pre prakticky akýkoľvek HTML elementu. Poznať základy editácia elementov plánov pomocou funkcie Float, a potom je vlastnosť, vytvoriť ľubovoľný dizajn stránok nebude ťažké.

Špeciálne programy DTP môže niekedy ignorovať obrazmi, a ísť cez ne. Dosť podobné veci sa stávajú a zobrazí sa web design, len s prihliadnutím k textu, skôr než lezenie na obrázku (ak sú použité nesprávne vlastnosti Float) vedľa neho alebo pod ním, ale nie vždy, kde je potrebné developer.

CSS Popis Float majetku

V skutočnosti, schopnosť používať Float vlastnosť je veľmi dobrá eso v rukáve pre akýkoľvek web designer. Ale, bohužiaľ, nedostatok pochopenie toho, ako to funguje, môže viesť ku kolíziám a iných prvkov trápenia stránok tohto druhu. Predtým tiež k takým situáciám dochádza z dôvodu chyby v prehliadačoch. Teraz bude otvorený tajomstvo, ako správne použiť vlastnosť Float, a žiadne problémy s ním by nemal byť väčší.

My Float vlastnosť má štyri hodnoty:

• Float: zdedí;
• Float: right;
• Float: left;
• Float: none;

Pre tých, ktorí vedia, anglicky, hodnoty parametrov Float majetku musí byť jasné. Ale pre tých, ktorí nevedia, si môžete priniesť trochu vysvetlenie. Parameter: left; Pohybuje sa telo prvku v najextrémnejšie ľavého rohu rodičovského elementu. To isté sa deje (iba opačným smerom), keď bcgjkmpjdfybb parameter: right; , Hodnota: zdedí; objednáva prvok prevziať rovnakú konfiguráciu, ako u rodičov. Tieto prvky sú tiež nazývané dcérske spoločnosti, pretože sa nachádzajú priamo rodič v html kódu. Vlastnosť: none; To umožňuje, aby prvok nie je narušiť obvyklý prietok dokument, ktorý je v predvolenom nastavení pre všetky časti kódu.

Ako Float prácu?

Vlastnosť float CSS funguje pomerne jednoducho. Všetko, čo bolo popísané vyššie, možno vykonať bez väčších ťažkostí. Za to, že všetko bude rovnako jednoduché. Ale predtým, než som pokračovať v štúdiu vlastností plavák, stojí za to trochu pohľad do teórie. Každý web je prvkom bloku. Je ľahké vidieť otvorením konzoly v prehliadači Google Chrome, stlačením Ctrl + Shift + J. textu, názvu, obrázka, odkazy a všetky ostatné zložky mieste budú zobrazené bloky, len rôzne veľkosti. Spočiatku, všetky tieto bloky sú po sebe. Ako sa uvádza v nižšie uvedenom príklade je kódový reťazec ísť jeden po druhom, a tak sa zdajú byť úplne za sebou.

To sa nazýva normálny prietok (normálny prietok). Pri tomto priebehu všetkých blokov spadnúť na sebe (bez prekročenia tela prvky) vo zvislom smere. Spočiatku celý obsah internetových stránok umiestnených týmto spôsobom. Avšak, pri použití, napríklad vlastnosti CSS Float Left jazyk element opustí svoje prirodzené pozíciu na stránke a pohybuje sa doľava. Toto správanie vedie k nevyhnutnému stretu s týmito prvkami, ktoré zostali v bežnom.

Inými slovami, prvky sú namiesto toho umiestnené vertikálne, sú teraz vedľa seba. Ak rodič element je dostatok priestoru, aby mohla pojať dve deti dovnútra, ku kolízii nedôjde, ale ak nie, je uloženie jedného objektu do druhého je neodvratný. Je nesmierne dôležité mať na pamäti, pre pochopenie vlastností Float CSS.

Clear funkcie k riešeniu problémov

Sme Float má srdce každého - Clear. Spoločne - nemajú úniku do vodných tokov. Obe tieto vlastnosti sa vzájomne dopĺňajú, a aby sa developer spokojný. Ako bolo uvedené vyššie, susedné bunky ísť von zo svojho bežného a tiež začať "plávať" ako prvku, ktorý bol použitý majetok Float (napríklad CSS Float Top). Výsledkom je, že namiesto toho, plávajúce prvok dostane dva, a to v mieste, kde hodlali zariadiť vývojárov. Od tej chvíle ešte len začína všetky problémy.

Na Clear funkcia má päť hodnôt:

• ľavé;
• : Pravý;
• : Obaja;
• : Zdediť;
• none;

Analogicky môžeme pochopiť, keď to je najlepšie použiť funkciu clear. Ak by sme písali riadok kódu Float: right; (CSS kód je určený), táto funkcia musí byť jasné: right;. Rovnaké vlastnosti hornín a float: left; to doplní jasná: doľava; , Pri písaní kódu jasne: obaja; Ukazuje sa, že prvok, na ktorý je aplikovaný, bude táto funkcia bude nižšia ako prvky, ktoré uplatňujú funkciu plaváka. Dediť berie nastavenia z nadradeného prvku, ale nikto nerobí žiadne zmeny štruktúry webu. и CSS Float-код, который сделает ваш веб-сайт единственным в своем роде. Ak máte porozumieť tomu, ako Float a jasné funkcie, môžete napísať jedinečný a neobvyklý HTML a CSS Float-kód, ktorý bude vaše webové stránky jedinečná svojho druhu.

Použitie funkcie Plávajúce vytvoriť stĺpce

Float zvlášť užitočnú funkciu pri vytváraní kolón na mieste (alebo umiestnenie obsahu CSS vznášať sa v stredu webovej stránky). Je tento kód je veľmi praktické a pohodlné, takže by ste mali zvážiť niekoľko možností, ako vytvoriť obvyklé miesto šablóna sa skladá z dvoch stĺpcov. Napríklad sa štandardné webové stránky s obsahom na ľavom navigačnom paneli (navigačnej lište) na pravej strane, hlavičky a päty. Tento kód vyzerá takto:

Teraz musíme pochopiť, čo je tu napísané. Materská prvok, v ktorom je hlavná časť html kódu nazýva kontajner (kontajner). To umožňuje zabrániť prvkov, ktoré sú aplikované funkcie Float rozptýliť v rôznych smeroch. Keby to nebolo, potom tieto prvky vznášal až k hraniciam prehliadača.

Potom, v kóde a ísť #content #navigation. Tieto prvky sa používajú funkciu plaváka. #content poslal doľava a doprava je #navigation. Je nutné vytvoriť web s dvomi stĺpci. Je nutné zadať šírku, takže objekty neprekrývajú navzájom. Môžete určiť šírku a percento. Takže ešte pohodlnejšie než v pixeloch. Napríklad, 45% až 45% a pre #content #navigation, a zvyšných 10%, čím sa získa vlastnosť rozpätia.

Vlastnosť Clear, ktorá je v #footer, nevyplýva zápätie #navigation a #content, ale ponecháva ju na rovnakom mieste, kde bol. Čo sa môže stať? ak nezadáte vlastnosť Clear? V tomto kóde #footer jednoducho ísť hore a bude pod #navigation. To sa deje v dôsledku skutočnosti, že #navigation dostatok priestoru pre viac ako jeden prvok. V tomto ilustratívnom príklade je jasne vidieť, ako sa vlastnosti číreho plaveného a vzájomne dopĺňajú.

Problémy sa môžu vyskytnúť pri písaní kódu

Vyššie uvedené príklady sú jednoduché. Ale s nimi môžu spôsobiť problémy. Všeobecne platí, že v skutočnosti, veľa nečakané problémy sa môže stať Float funkciu. Bez ohľadu na to, ako podivné, ale problémy sa zvyčajne nevyskytujú u CSS a HTML kód. Miesto, kde je prvok s funkciou Float v html kódu, ktoré priamo ovplyvňujú chod druhej. Aby sa zabránilo rôzne druhy ťažkostí, to je najlepšie držať sa jednoduchých pravidiel - polohovacie prvky Float funkcii prvého kódu. Takmer vždy to funguje a aby sa minimalizovali ich neočakávané správanie.

súboj elementov

Dochádza ku kolízii, keď je nadradený prvok obsahuje viac dieťa nemôže prijať všetky, a ktoré sa vzájomne prekrývajú. Dokonca sa stáva, že predmety sa nemusí objaviť, a zmizne z webu. To nie je chyba prehliadača, a očakáva sa, a správne správanie prvkov s funkciou Float.

Vzhľadom k tomu, že tieto prvky sú najprv v normálny priebeh, a potom je to zlomené Float vlastnosť prehliadač dokáže odstrániť z webu. Ale nezúfajte, pretože riešenie je jednoduché a jasné - použite vlastnosť Ceara. Je možné, že všetky spôsoby, ako z tohto problému je použitie Clear je najúčinnejší.

Ale problém kolízie prvkov webových stránok môžu byť riešené iným spôsobom. Existujú najmenej dva spôsoby:

• Umiestnite použití funkcie;
• Aplikácia flexboxu.

Funkcia pozícia je často dobrou alternatívou k CSS Float. V stredu webové stránky v prípade žiadosti pozície je najlepšie umiestniť obraz. Ak je správne použiť hodnoty: absolútnu a: relatívna, prvky zapadne na svoje miesto, a sa vzájomne neprekrývajú.

Pozícia Analýza a Float kód funkcie

и CSS Float заменить на Position. To by malo viac zaoberať s tým, ako v HTML a CSS Float nahradená postoja. V skutočnosti je to veľmi jednoduché. Povedzme, že existuje prvok #container a #div.

#container {

šírka: 40%;

float: left;

margin: 10px;

}

#div {

šírka: 40%;

float: právo;

margin: 10px;

}

#footer {

jasné: obe;

}

V tomto príklade je použitie funkcií v druhej nádobe (CSS Div) Float pomôže vytvoriť štandardné namiesto dvoch stĺpcov. Nikdy nezabudnem na Clear funkciu. Bez nej vloží len prvky na seba.

Tak ako sa vám zmena CSS a Float kód pre použitie mieste.? Veľmi jednoduchý:

#container {

šírka: 40%;

Pozícia: relatívna;

margin: 10px;

}

#div {

šírka: 40%;

Pozícia: relatívna;

margin: 10px;

}

V tomto prípade #container #div a prijať potrebné postavenie vývojár v materskej element. Hlavná vec? dať #div a #container jeden nadradený prvok, ktorý bude odpovedať na ich veľkosti.

Flexboxu - táto funkcia nahradí CSS Float?

Flexboxu - najmodernejší spôsob, ako vytvoriť webové stránky v okamihu, takže táto funkcia nie je podporovaná staršími verziami prehliadačov. Táto skutočnosť nie je diskontovať, aby užívatelia so staršími verziami prehliadačov nebude vidieť správna verzia webu.

Flexboxu nie je vlastnosť, ako samostatný modul. Preto flexboxu podporuje celý rad vlastností, ktoré pracujú iba s ním. Okrem toho sa na displeji funkcia, ktorá má tri parametre inline, blokové a inline-blok v flexboxu je tam len jeden flex-flow.

Ako flexboxu?

Táto technológia pomáha vývojárom ľahko zladiť prvky horizontálne aj vertikálne. Flexboxu môže tiež zmeniť smer a poradie zobrazenia prvkov. V tejto technológie, existujú dve osi: Hlavná os a priečna os, okolo ktorej sa celý flexboxu postavené. To tiež odstraňuje efekt Float a Clear funkcie. Ten stavia svoj systém kód, ktorý využíva jedinečnú k svojmu vlastníctva, takže bohužiaľ, nebudú môcť replikovať v bunkách iné vlastnosti, ako je napríklad Float a postoj. A to by bolo veľmi užitočné, pretože, ako už bolo uvedené vyššie, flexboxu pracovať iba v novších verziách prehliadačov.

Treba pripomenúť, že v koncovej polohe, flexboxu Float a to isté - vytvoriť nevšedný a originálny dizajn svojich stránok. Každá verzia je uvedené v článku to robí po svojom, a preto má svoje výhody aj nevýhody. Navyše sa stáva, že niekde dokonalá funkcie Float (napríklad v mieste s jednoduchou štruktúrou), ale niekde lepšie použiť polohe alebo flexboxu.

Double Margin Bug

Niekedy však, bohužiaľ, každý vývojár problémy vznikajú nie z literou zákona, s chyby av niektorých prehliadač špecifická forma. Napríklad v programe Internet Explorer, je chyba, ktorá sa nazýva Double Margin Bug. Ten násobí parameter marže na dve časti, čo vedie k posunu prvkov mieste mimo prehliadači. Aby sa tomu zabránilo, je dostatočné na určenie parametru Margin percento. Za normálnych okolností táto chyba nastane, ak je hodnota vo vlastnosti okraje a Float stretnutia.

#div {

float: left;

margin-left: 10px;

}

Tento kód sa posunie prvok v programe Internet Explorer 20 px vľavo. Môžete upraviť kód nasledujúcim spôsobom:

#div {

float: left;

margin-left: 10%;

}

alebo tak nejako

#div {

float: left;

margin-right: 10px;

}

Obe tieto možnosti bude riešiť problém posunutie prvkov.

Chyby prehliadač a nesprávne zobrazenie stránky

Stojí za to si uvedomiť, že Internet Explorer - nie je jediný prehliadač, ktorý môže nastať chyby. Staršie verzie aplikácie Google Chrome a Mozilla tiež nesprávne zobrazuje niektoré prvky moderných webových stránok. Pre každý z týchto opráv, môžete nájsť riešenie. Všeobecne možno konštatovať, že použitie Float vytvoria originálny a atraktívny dizajn webu. Pochopenie základy a princípy tohto majetku pomôže vyhnúť sa chybám a uľahčiť život každého vývojárov.