CSS Float: Popis, Vlastnosti

Float - jedna zo základných funkcií jazyka CSS (Cascading Style Sheets - kaskádové formát). Tento jazyk existuje od roku 1996 a naďalej sa vyvíja. Momentálne vývojári už používajú 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 v prípade, nepoužíva javascript. Moderné vlastnosti tretej verzie to umožňujú. Tiež, vývojári môžu využiť výhodnejšie možnosti formátovania, napríklad flexboxu alebo polohy pre zmenu položky na webe, ale poporiadku. Najskôr by ste mali zvážiť výhody a nevýhody vlastností Float.


CSS Float - Prečo to potrebujete?

Float - 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ý obaľuje veľmi opatrne okolo nich. Vo svete kódov HTML a CSS pri použití Float sa stane to isté. Treba však pamätať na to, že úprava obrázkov nie je vždy hlavným účelom tejto funkcie. Môže sa použiť na vytvorenie populárneho umiestnenia prvkov stránky v dvoch, troch, štyroch stĺpcoch. V skutočnosti je vlastnosť Float CSS aplikovaná prakticky na akýkoľvek html prvok. Znalosť základov úpravy umiestnenia položiek pomocou funkcie Float a potom vlastníctva a vytvorenie dizajnu webových stránok nebude zvláštnou úlohou.
Špeciálni programátori môžuniekedy nezaznamenávajú obrázky a neprejdú nad nimi. Dosť podobné veci sa dejú v návrhu internetových stránok, ale s názorom, že text namiesto vyšplhať na snímke zobrazenom (v prípade nesprávneho uplatňovania vlastnosti Float) vedľa neho alebo pod ním, ale nie vždy, kam chcete developer ,


CSS Float opis nehnuteľnosti

V skutočnosti je schopnosť používať vlastnosť Float veľmi dobrým esom v rukáve pre každého web dizajnéra. Ale bohužiaľ, nedostatok pochopenia toho, ako táto funkcia funguje, môže viesť k zrážkam s prvkami lokality a inou frustráciou tohto druhu. Skôr podobné situácie nastali pri chybách v prehliadačoch. Teraz sa tajomstvo, ako riadne používať vlastnosti Float, bude odkryté a žiaden problém s tým už nebude. Vlastnosť Float má štyri hodnoty:
  • Float: dedičná;
  • Float: vpravo;
  • Float: vľavo;
  • Float: žiadny;
    Pre tých, ktorí vedia angličtinu, by mala byť hodnota vlastností parametra Float jasná. Ale pre tých, ktorí nevedia, môžete dať trochu vysvetlenia. Parameter: vľavo; presúva telo prvku do úplne ľavého rohu rodičovského prvku. Rovnaká vec sa deje (len na druhú stranu) s parametrom bcgjkmpjdfybb: vpravo; , Hodnota: zdedenie; informuje prvok, že má rovnaké parametre ako v nadradenej. Tieto prvky sú nazývané dieťa, pretože sa nachádza priamo vo vnútri rodič html kódu. Vlastnosť: žiadna; prvok umožňuje nedošlo k narušeniu normálneho toku dokumentu, je nastavený ako predvolený pre všetkyčasti kódu.

    Ako funguje Float?

    Vlastnosť Float CSS funguje veľmi jednoducho. Všetko, čo bolo opísané vyššie, sa môže vykonať bez veľkého úsilia. Potom bude všetko jednoduché. Ale predtým, ako budete pokračovať v štúdiu vlastností Float, stojí za to trochu pochopiť teóriu. Každý prvok webovej stránky je blokom. Je to jednoduché vidieť otvorením konzoly v prehliadači Google Chrome stlačením klávesov Ctrl + Shift + J. Text, názov, obrázok, odkaz a všetky ostatné časti stránky sa zobrazia v blokoch rôznych veľkostí. Najskôr všetky tieto bloky idú po sebe. Ako je zrejmé z príkladu nižšie, riadky kódu sú jeden po druhom, takže budú zobrazené prísne jeden po druhom.
    Toto sa nazýva normálny prietok. S týmto kurzom všetky bloky ležia navzájom (bez prechodu telesa prvkov) vertikálne. Po prvé, celý obsah webovej stránky je umiestnený týmto spôsobom. Ale ak použijete napríklad vlastnosti jazyka CSS Float Left, element opustí svoju prirodzenú pozíciu na stránke a posunie sa do krajnej ľavej polohy. Takéto správanie nevyhnutne vedie k zrážke s prvkami, ktoré zostali v normálnom priebehu. Inými slovami, prvky namiesto toho, aby boli umiestnené vertikálne, sú teraz blízko sebe. Ak má rodičovský prvok dostatok priestoru na to, aby mohol umiestniť dve dcérske spoločnosti do seba, potom nedôjde k žiadnej kolízii, a ak nie, potom je uloženie jedného objektu na iný nevyhnutný. Je nesmierne dôležité pamätať na pochopenie fungovania vlastníctva Float CSS.

    Jasná funkcia preriešenie problémov

    Funkcia Float je srdcom jedného - Clear. Spoločne nie sú vyliata voda. Obidve tieto funkcie sa navzájom dopĺňajú a robia vývojárov šťastnými. Ako už bolo uvedené vyššie, susedné prvky z jej bežného a tiež začať "plávať" ako prvok, ktorý majetok používa Float (napr CSS Float Top). Ako výsledok, namiesto plávajúceho prvku na dve, a to v mieste, kde majú v úmysle umiestniť vývojárov. Odteraz sa začínajú všetky problémy.
    Funkcia Clear má päť hodnôt:
  • : left;
  • : správne;
  • : obe;
  • : zdedenie;
  • žiadne;
  • Analogicky môžete pochopiť, kedy je najlepšie použiť funkciu Vymazať. Ak máme reťazec napísaný v Float: správne; (CSS kód je myslený), potom by mala byť funkcia Clear: right ;. To isté platí pre vlastnosti Float: vľavo; doplniť to bude jasné: vľavo; , Pri písaní kódu Vymazať: obe; dostať ten predmet, ktorý ste použili táto funkcia bude nasledujúce prvky sa používajú pre funkciu Float. Služba Zdediť preberá konfiguráciu rodičovských prvkov a žiadna z nich nezmení štruktúru lokality. Ak máte pochopiť, ako funkciu plaváka a jasné, že môžete pí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 Float na vytváranie stĺpcov

    Funkcia Float je zvlášť užitočná pri vytváraní stĺpcov na webe (alebo umiestnení pozície CSS v strede webovej stránky). Je to tento kód, ktorý je najpraktickejší a najpohodlnejší, takže stojí za to zvážiť niekoľko možností na vytvorenie obvykléhošablóna lokality pozostávajúca z dvoch stĺpcov. Vezmime si napríklad štandardnú webovú stránku s obsahom vľavo, navigačný panel vpravo, hlavičku a pätu. Kód bude:
    Teraz je potrebné pochopiť, čo je napísané tu. Nadradený prvok, ktorý obsahuje hromadný html kód, sa nazýva kontajner. Umožňuje vám nedávať prvky, ktoré sa používajú s funkciou Float, rozdelené v rôznych smeroch. Ak tomu tak nie je, tieto prvky by sa dostali do hraníc samotného prehliadača. Potom sú #content a #navigation v kóde. Tieto prvky používajú funkciu Float. #content je poslaný doľava a #navigácia ide napravo. Toto je potrebné na vytvorenie stránky s dvoma stĺpcami. Uistite sa, že ste zadali šírku, aby sa objekty neprekrývali. Šírka môže byť tiež špecifikovaná v percentách. Takže ešte pohodlnejšie ako v pixeloch. Napríklad 45% pre #content a 45% pre #navigation a zvyšných 10% pre vlastnosti návratovej marže. Objekt Clear nachádzajúci sa v # footer neumožňuje, aby zápätie nasledovalo #navigation a #content, ale ponechávalo ho na rovnakom mieste ako bolo. Čo sa môže stať? ak neurčíte vlastnosť Vymazať? V tomto kóde #footer jednoducho stúpa a zobrazí sa pod #navigation. K tomu dôjde, pretože #navigácia má dostatok miesta na umiestnenie inej položky. V tomto ilustratívnom príklade je veľmi jasné, ako sa navzájom dopĺňajú vlastnosti Clear Float.

    Problémy, s ktorými sa môžete stretnúť pri písaní kódu

    Vyššie uvedené príklady sú veľmi jednoduché. Ale s nimi môžu byť problémy. Všeobecne platí,v skutočnosti sa môžu vyskytnúť mnohé neočakávané problémy s funkciou Float. Nebolo by to zvláštne, ale problémy zvyčajne nevyplývajú z CSS, ale s html kódom. Miesto, kde sa nachádza položka s funkciou Float v html kóde, priamo ovplyvňuje prácu tejto položky. Aby sa predišlo všetkým problémom, je najlepšie dodržiavať jednoduché pravidlo - umiestňovať prvé položky v kóde prvkami s funkciou Float. Takmer vždy to funguje a minimalizuje ich neočakávané správanie.

    Kolízia prvkov

    Kolízia nastane, keď rodičovská položka obsahujúca niekoľko dcér nemôže nahradiť všetky z nich a prekrývajú sa. Dokonca sa stáva, že sa položky nemusia zobraziť, ale zmiznú z lokality. Toto nie je chyba prehliadača, ale dobre očakávané a správne správanie prvkov s funkciou Float. Vzhľadom na to, že tieto prvky sú spočiatku v bežnom kurze a potom porušujú vlastnosť Float, môže ich prehliadač odstrániť zo stránky stránky. Nemali by ste však zúfalo, pretože riešenie je jednoduché a jasné - používajte majetok spoločnosti Cear. Je možné, že Clear je najúčinnejší spôsob, ako sa z tohto problému dostať. Ale problém zrážky prvkov webovej stránky možno vyriešiť iným spôsobom. Existujú aspoň dva ďalšie spôsoby:
  • pomocou funkcie pozície;
  • Aplikácia Flexbox.
  • Pozícia Funkcia je dobrá alternatíva k CSS Float. V strede webovej stránky je v prípade pozície najlepšie usporiadať obrázok. Ak použijete hodnotu správne: absolútna: relatívna, potom sa položky dostanú na svoje miesto a nebudúnavzájom prekrývajú.

    Analýza kódu funkcií polohy a plavebnej funkcie

    Je potrebné podrobnejšie preskúmať, ako nahradiť kód HTML a CSS Float s pozíciou. V skutočnosti je to veľmi jednoduché. Predpokladajme, že existuje prvok #container a #div. #container {šírka: 40%; plavák: vľavo; margin: 10px; } #div {šírka: 40%; float: vpravo; margin: 10px; } #footer {clear: both; }
    V tomto príklade pomôcka pri použití druhej kontajnerovej funkcie (CSS Div) Float pomôže vytvoriť štandardnú stránku s dvoma stĺpcami. Nikdy nezabudnite funkcie Vymazať. Bez neho sa objaví len prekrytie prvkov. Ako teda môžem zmeniť kód CSS a Float, aby som použil funkciu Postion? Je to 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 a #div prijme pozíciu vývojára v nadradenom elemente. Hlavná vec? umiestnite #div a #container do jedného nadradeného prvku, ktorý zodpovedá ich veľkosti.

    Flexbox - Ako táto funkcia pomáha nahradiť CSS Float?

    Flexbox je najpokročilejší spôsob vytvárania webových stránok v súčasnosti, takže táto funkcia nie je podporovaná staršími prehliadačmi. Táto skutočnosť by sa nemala znižovať, pretože používatelia s zastaranými verziami prehliadačov nebudú môcť vidieť správnu verziu stránky. Flexbox nie je vlastnosť, ale samostatný modul. Flexbox preto podporuje množstvo vlastností, ktoré s ňou pracujú. Okrem toho vo funkčnom displeji, ktorý má tri parametre inline, blok a inline-block v flexboxe, existuje len jeden flex-flow.

    Ako funguje Flexbox?

    Táto technológia pomôže vývojárom ľahko zosúladiť prvky horizontálne a vertikálne. Flexbox tiež môže zmeniť smer a poradiezobrazovanie položiek. Táto technológia má dve osi: hlavná os a krížová os, okolo ktorých je postavený celý Flexbox. Takisto vymaže funkciu Float a Clear. Vytvára svoj systém v kóde, ktorý používa len jeho vlastnosti, takže bohužiaľ nebude schopný duplikovať ďalšie vlastnosti v prvkoch, ako napríklad Float a Position. A to by bolo veľmi, pretože, ako bolo uvedené vyššie, Flexbox funguje len v nových verziách prehliadačov.
    Treba pripomenúť, že nakoniec pozície, Flexbox a Float robia to isté - vytvoriť neobvyklý a originálny dizajn vášho webu. Každá možnosť v článku to robí svojou vlastnou cestou, a preto má aj výhody aj nevýhody. A čo viac, Float (napríklad stránka s jednoduchou štruktúrou) je niekde skvelá a je lepšie použiť niekde pozíciu alebo Flexbox.

    Chyba dvojitého okraja

    Niekedy sa však bohužiaľ každý vývojár bohužiaľ stretáva s problémami, ktoré nesúvisia s písomným kódom, ale s chybami v určitom type prehliadača. Napríklad v programe Internet Explorer existuje chyba s názvom Double Margin Bug. To vynásobí parameter Margin dvoma, čo vedie k posunutiu prvkov lokality mimo prehliadača. Aby ste tomu zabránili, stačí, aby ste v percentách určili parameter Margin. Táto chyba sa zvyčajne vyskytuje, keď sú hodnoty vo vlastnostiach Okraj a Plavák rovnaké. #div {float: left; margin-left: 10px; } Tento kód presunie položku v programe Internet Explorer o 20 px doľava. Môžete zmeniť kód: #div {float: left; margin-left: 10%; } alebo tak, #div {float: left; margin-right: 10px; } Obidve tieto možnosti vyriešia problém ovplyvňovania položiek.

    Chyby prehliadača a nesprávne mapovanie lokality

    Stojí za to pamätať, že Internet Explorer nie je jediný prehliadač, ktorý môže mať chyby. Staršie verzie prehliadačov Google Chrome a Mozilla tiež nesprávne odrážajú niektoré prvky moderných webových stránok. Pre každú z týchto chýb nájdete riešenie. Vo všeobecnosti by som rád poznamenal, že použitie Float vytvorí originálny a atraktívny dizajn lokality. Pochopenie základov a princípov tejto funkcie zabráni chybám a uľahčí život pre každého vývojára.

    Súvisiace publikácie