CSS Float: Popis, Vlastnosti

Float - jedna ze základních funkcí jazyka CSS (Cascading Style Sheets - formátovací kaskádové tabulky). Tento jazyk existuje od roku 1996 a stále se vyvíjí. V současné době již vývojáři používají třetí verzi CSS. Pomocí programovacího jazyka CSS je možné zcela vytvořit příjemné a příjemné místo, které se nezdá být zastaralé nebo nepohodlné pro uživatele, i když nepoužíváte javascript vůbec. Moderní funkce třetí verze to umožňují. Také vývojáři mohou používat pohodlnější možnosti formátování, například Flexbox nebo pozici pro změnu umístění položky na webu, ale vše je v pořádku. Za prvé, měli byste zvážit výhody a nevýhody vlastností Float.


CSS Float - Proč to potřebujete?

Float - vlastnost pro polohovací prvky. Každý den je vidět na stránkách novin a časopisů a dívá se na obrázky a text, který je jemně krouží. Ve světě kódů HTML a CSS, pomocí funkce Float, by se měla stát ta samá věc. Ale stojí za to si pamatovat, že editaci obrázků není vždy hlavním účelem této funkce. Může být použit k vytvoření populárního umístění prvků stránek ve dvou, třech, čtyřech sloupcích. Ve skutečnosti je vlastnost Float CSS aplikována prakticky na libovolný element html. Znalost základů úpravy umístění položek pomocí funkce Float a potom Vlastnost a vytvoření jakéhokoli návrhu webu nebude zvláštní úlohou.
Zvláštní programátoři mohouněkdy si nevšimnou obrázky a jdou přes ně. Dosti podobné věci se dějí v návrhu internetových stránek, ale s názorem, že text namísto vyšplhat na snímku zobrazeném (v případě nesprávného uplatňování vlastnosti Float) vedle něj nebo pod ním, ale ne vždy, kam chcete developer .


CSS Float popis nemovitosti

Ve skutečnosti schopnost používat Float vlastnost je velmi dobrý eso v rukávu pro každého web designer. Bohužel však nedostatečné porozumění tomu, jak tato funkce funguje, může vést ke střetům se stránkovými prvky a jinou frustrací tohoto druhu. Dříve podobné situace nastaly při chybách v prohlížečích. Nyní bude odhaleno tajemství, jak správně používat vlastnost Float, a nebude se s tím dělat žádný problém. Vlastnost Float má čtyři hodnoty:
  • Float: dědictví;
  • Float: vpravo;
  • Float: vlevo;
  • Float: žádný;
    Pro ty, kteří znají angličtinu, by měla být hodnota vlastností parametrů Float jasná. Ale pro ty, kteří nevědí, můžete dát trochu vysvětlení. Parametr: vlevo; přesune tělo prvku do levého levého rohu nadřazeného prvku. Totéž se děje (na druhou stranu) s parametrem bcgjkmpjdfybb: right; . Hodnota: dědí; říká prvku, aby převzal stejné parametry jako v nadřazeném objektu. Tyto prvky se také nazývají přidružené, protože jsou umístěny přímo v rodiči v html kódu. Vlastnost: žádný; dovolí prvku neporušovat normální tok dokumentu, je nastaven na výchozí pro všechnyčásti kódu.

    Jak funguje Float?

    Vlastnost Float CSS funguje jednoduše. Vše, co bylo výše popsáno, lze provést bez velkého úsilí. Pak bude všechno stejně jednoduché. Ale než budete pokračovat ve studiu vlastností Float, stojí za to trochu porozumět teorii. Každý prvek webové stránky je blok. Je to snadné vidět tím, že otevřete konzolu v Google Chrome stisknutím kláves Ctrl + Shift + J. Text, název, obrázek, odkaz a všechny ostatní části webu se zobrazí v bloků různých velikostí. Nejprve všechny tyto bloky jdou za sebou. Jak je vidět z příkladu níže, řádky kódu jsou jedna za druhou, takže budou zobrazeny přísně jeden za druhým.
    Toto se nazývá normální tok. Tímto kursem jsou všechny bloky na sobě navzájem (bez přechodu tělesa prvků) ve svislé poloze. Za prvé se nachází celý obsah webové stránky tímto způsobem. Ale když používáte například vlastnosti jazyka CSS Float Left, element opouští svou přirozenou pozici na stránce a posune se do krajní levé polohy. Takové chování nevyhnutelně vede ke kolizi s těmi prvky, které zůstaly v normálním průběhu. Jinými slovy, prvky namísto toho, aby byly umístěny svisle, jsou nyní blízko sebe. Pokud mateřský prvek má dostatek prostoru pro to, aby mohl umístit dvě dceřiné společnosti uvnitř sebe, pak nedojde k žádné kolizi, a pokud ne, pak uložení jednoho objektu na jiný je nevyhnutelný. Je nesmírně důležité si uvědomit, jak funguje vlastnost Float CSS.

    Jasná funkce prořešení problému

    Funkce Float je srdcem jednoho - Clear. Společně nejsou vylitou vodou. Obě tyto funkce se navzájem doplňují a dělají vývojáře radost. Jak bylo uvedeno výše, sousední prvky vystupují z normálního chodu a také začínají plavat jako prvek, na který byla použita vlastnost Float (například CSS Float Top). Výsledkem toho je, že namísto jednoho plovoucího prvku vystupují dva a nikoli na místě, kde zamýšleli umístit vývojáře. Od této chvíle začínají všechny problémy.
    Funkce Clear má pět hodnot:
  • : left;
  • : vpravo;
  • : obě;
  • : dědí;
  • žádný;
  • Analogicky můžete pochopit, kdy je nejlepší použít funkci Vymazat. Máme-li řetězec napsaný v Float: pravý; (Znamená CSS kód), pak by měla být funkce Clear: right ;. Totéž platí pro vlastnosti Float: left; doplnit bude jasné: vlevo; . Při psaní kódu Vymazat: obě; že element, na který je tato funkce použita, bude pod položkami, na které je použita funkce Float. Funkce Dědění dělá konfiguraci rodičovských prvků a žádný nezmění strukturu webu. Pokud víte, jak fungují funkce Float a Clear, můžete napsat jedinečný a neobvyklý kód plavebního kódu HTML a CSS, který bude váš web jedinečný svým druhem.

    Použití funkce Float pro vytváření sloupců

    Funkce Float je zvláště užitečná při vytváření sloupců na webu (nebo umístění CSS float v centru webové stránky). Tento kód je nejpraktičtější a nejvhodnější, takže stojí za to zvážit několik možností pro vytvoření obvykléhošablonu webu sestávající ze dvou sloupců. Vezměme si například standardní web s obsahem vlevo, navigační panel vpravo, záhlaví a zápatí. Kód bude:
    Nyní je třeba pochopit, co je zde napsáno. Nadřazený prvek, který obsahuje hlavní část html kódu, se nazývá kontejner. Umožňuje vám nedávat prvky, které se používají s funkcí Float, rozdělené v různých směrech. Pokud tomu tak není, pak by tyto prvky proudily na hranice samotného prohlížeče. Poté jsou #content a #navigation v kódu. Tyto prvky používají funkci Float. #content je odeslán doleva a #navigation jde doprava. To je nutné pro vytvoření dvou sloupců. Ujistěte se, že jste zadali šířku tak, aby se předměty navzájem nepřekrývaly. Šířka může být také uvedena v procentech. Takže ještě pohodlnější než v pixelech. Například 45% pro #content a 45% pro #navigation a zbývající 10% pro vlastnosti návratové marže. Vlastnost Clear umístěná v # footer neumožňuje, aby zápatí sledovalo #navigation a #content, ale ponechává to na stejném místě jako bylo. Co se může stát? pokud neurčíte vlastnost Vymazat? V tomto kódu #footer jednoduše jde nahoru a zobrazí se pod #navigation. K tomu dojde, protože #navigace má dostatek místa k umístění další položky. V tomto ilustrativním příkladu je velmi jasné, jak se vlastnosti Clear Float vzájemně doplňují.

    Problémy, s nimiž se může při psaní kódu setkat

    Výše ​​uvedené příklady jsou velmi jednoduché. Ale s nimi mohou být problémy. Obecně platí,Ve skutečnosti se může při funkci Float vyskytnout mnoho nečekaných potíží. Nebylo by to divné, ale problémy obvykle nevznikají z CSS, ale s html kódem. Umístění, kde se nachází položka s funkcí Float v html kódu, přímo ovlivňuje její práci. Abyste se vyhnuli nejrůznějším obtížím, je nejlepší dodržet jednoduché pravidlo - umístit položky s funkcí Float nejprve v kódu. Téměř vždy funguje a minimalizuje jejich neočekávané chování.

    Srážka prvků

    Kolize nastává, když rodičovský předmět, který obsahuje několik dcer, nemůže dojít k jejich vzájemnému překrývání. Stává se dokonce, že se položky nemusí zobrazit, ale zmizí z webu. Toto není chyba prohlížeče, ale dobře očekávané a správné chování prvků s funkcí Float. Vzhledem k tomu, že tyto prvky jsou zpočátku v normálním průběhu a poté porušují vlastnost Float, prohlížeč je může odstranit ze stránky webu. Nicméně byste neměli zoufat, protože řešení je jednoduché a jasné - použijte vlastnost Cear. Je možné, že Clear je nejúčinnější způsob, jak se z tohoto problému dostat. Ale problém kolize prvků webové stránky lze vyřešit jiným způsobem. Existují nejméně dva další způsoby:
  • pomocí funkce Pozice;
  • Aplikace Flexbox.
  • Pozice Funkce je dobrou alternativou k CSS Float. Ve středu webové stránky je v případě pozic nejlepší uspořádat obrázek. Pokud použijete hodnotu správně: absolutní: relativní, pak se položky dostanou až na své místo a nebudouna sobě navzájem překrývají.

    Analýza kódu funkce Position a Float

    Je třeba podrobněji prozkoumat, jak nahradit kód HTML a CSS Float s pozicí. Ve skutečnosti je to velmi jednoduché. Předpokládejme, že existuje prvek #container a #div. #container {šířka: 40%; float: vlevo; margin: 10px; } #div {šířka: 40%; float: vpravo; margin: 10px; } #footer {clear: both; }
    V tomto příkladu použití druhého kontejneru funkce (CSS Div) Float pomůže vytvořit standardní dvou-sloupec stránky. Nikdy nezapomeňte funkce Vymazat. Bez ní se objeví pouze překrývání prvků. Jak tedy mohu změnit CSS a Float kód tak, abych použil pozici? Je to velmi snadné: #container {width: 40%; poloha: relativní; margin: 10px; } #div {šířka: 40%; poloha: relativní; margin: 10px; } V tomto případě #container a #div přijmou pozici vývojáře v nadřazeném prvku. Hlavní věc? umístit #div a #container do jednoho nadřazeného prvku, který odpovídá jejich velikosti.

    Flexbox - Jak tuto funkci pomáhá nahradit CSS Float?

    Flexbox je nejpokročilejší způsob, jak vytvořit webové stránky v tuto chvíli, takže tato funkce není podporována staršími prohlížeči. Tato skutečnost by neměla být vyloučena, protože uživatelé s zastaralými verzemi prohlížečů nebudou moci vidět správnou verzi webu. Flexbox není vlastnost, ale samostatný modul. Flexbox tedy podporuje řadu vlastností, které pracují pouze s ním. Navíc ve funkčním displeji, který má tři parametry v řádku, zablokuje a zablokuje v flexboxu, existuje pouze jeden flex-flow.

    Jak funguje Flexbox?

    Tato technologie pomůže vývojářům snadno sladit prvky horizontálně a vertikálně. Flexbox také může změnit směr a pořadízobrazení položek. Tato technologie má dvě osy: Hlavní osu a křížovou osu, kolem které je vybudován celý Flexbox. Vymaže také funkci Float a Clear. Vytváří svůj systém v kódu, který využívá pouze jeho vlastnosti, takže bohužel nebude schopen duplikovat další vlastnosti elementů, jako například Float a Position. A to by bylo velmi, protože, jak bylo uvedeno výše, Flexbox funguje pouze v nových verzích prohlížečů.
    Je třeba připomenout, že nakonec pozice, Flexbox a Float dělají totéž - vytvořit neobvyklý a originální design vašeho webu. Každá možnost v článku to dělá svým vlastním způsobem, a proto má jak výhody, tak i nevýhody. A co víc, Float (například stránka s jednoduchou strukturou) je někde skvělá a je lepší použít někde Position nebo Flexbox.

    Chyba dvojité marže

    Někdy se však někdy bohužel každý vývojář setkává s problémy, které se netýkají písemného kódu, ale s chybami v určitém prohlížeči. Například v aplikaci Internet Explorer existuje chyba nazvaná Double Margin Bug. Vynásobí parametr Margin dvěma, což má za následek posunutí prvků webu mimo prohlížeč. Chcete-li tomu zabránit, stačí zadat parametr Margin v procentech. Tato chyba se obvykle vyskytuje, když hodnoty ve vlastnostech okrajů a polí jsou stejné. #div {float: left; margin-left: 10px; } Tento kód přesune položku v aplikaci Internet Explorer o 20 px nalevo. Kód můžete změnit: #div {float: left; margin-left: 10%; } nebo tak, #div {float: left; margin-right: 10px; } Obě tyto možnosti vyřeší problém předpínání položek.

    Chyby prohlížeče a nesprávné mapování webu

    Stojí za to pamatovat, že aplikace Internet Explorer není jediným prohlížečem, který může mít chyby. Starší verze prohlížečů Google Chrome a Mozilla také nesprávně odrážejí některé prvky moderních webových stránek. Pro každou z těchto chyb najdete řešení. Obecně bych rád poznamenal, že použití Floatu vytvoří originální a atraktivní design místa. Pochopení základů a principů této funkce zabrání chybám a ulehčí život pro každého vývojáře.

    Související publikace