CSS Float: popis, vlastnosti

Plynulá jízda - jeden ze základních funkcí jazyka CSS (jsou kaskádovými se styly - formátování kaskádových). Tento jazyk existuje od roku 1996 a stále pokračuje v rozvoji. V tomto okamžiku, vývojáři použili třetí verzi CSS. S CSS programovacího jazyka je možné vytvořit krásný a příjemný web, který se nezobrazí zastaralé nebo nepohodlný pro uživatele, a to i pokud jste nepoužili JavaScript. Moderní možnosti třetí verze povolení.

Také, vývojáři mohou využít výhodnější možnosti formátování, například flexboxu nebo postoje ke změně prvek místa na webu, ale popořadě. Chcete-li začít chápat výhody a nevýhody Float vlastnosti.

CSS Float - proč je to potřeba?

Plynulá jízda - vlastnost pro polohovací prvky. Každý den je možné vidět na stránkách novin a časopisů, při pohledu na obrázky a text, který je velmi pěkně obtéká kolem nich. и CSS при использовании функции Float должно произойти то же самое. Ve světě HTML a CSS kódu pomocí funkce Float by se mělo stát to samé. Ale je třeba připomenout, že pro úpravu obrázků není vždy hlavním cílem této funkce. To může být použit k vytvoření populární umístění prvků stránek ve dvou, třech, čtyřech sloupcích. Ve skutečnosti je nemovitost Float CSS se používá pro prakticky jakýkoli HTML elementu. Znát základy editace elementů plánů pomocí funkce Float, a pak je vlastnost, vytvořit libovolný design stránek nebude těžké.

Speciální programy DTP může někdy ignorovat obrazy, a jít přes ně. Dost podobné věci se stávají a web design, pouze s ohledem na text, spíše než stoupání na obrázek se zobrazí (pokud jsou použity nesprávně vlastnosti Float) vedle něj nebo pod ním, ale ne vždy, kdy budete potřebovat developer.

CSS Popis Float majetku

Ve skutečnosti, schopnost používat Float vlastnost je velmi dobrá eso v rukávu pro jakýkoli web designer. Ale, bohužel, nedostatek pochopení toho, jak to funguje, může vést ke kolizím a jiných prvků trápení stránek tohoto druhu. Dříve také k takovým situacím dochází z důvodu chyby v prohlížečích. Nyní tajemství o tom, jak používat vlastnost Float, budou otevřeny, a žádné problémy s ním by neměl být delší.

My Float vlastnost má čtyři hodnoty:

• Float: dědí;
• Float: right;
• Float: left;
• Float: none;

Pro ty, kteří vědí, anglicky, hodnoty parametrů Float majetku musí být jasné. Ale pro ty, kteří nevědí, můžete přinést trochu vysvětlení. Parametr: left; Pohybuje se tělo prvku v nejextrémnější levého rohu rodičovského elementu. Totéž se děje (pouze opačným směrem), když bcgjkmpjdfybb parametr: right; , Hodnota: zdědí; objednává prvek převzít stejnou konfiguraci, jako u rodiče. Tyto prvky s názvem dítě stále, protože se nachází přímo v mateřské html-in kódu. Vlastnost: none; To umožňuje, aby prvek, který nenaruší obvyklý tok dokumentu, který je nastaven jako výchozí pro všechny části kódu.

Jak Float práci?

Vlastnost Float CSS funguje poměrně jednoduše. Vše, co bylo popsáno výše, lze provést bez větších obtíží. Za to, že všechno bude stejně snadné. Ale předtím, než jsem pokračovat ve studiu vlastností plovák, stojí za to trochu pohled do teorie. Každý web je prvkem bloku. Je snadné vidět otevřením konzoly v prohlížeči Google Chrome, stisknutím Ctrl + Shift + J. textu, názvu, obrázku, odkazy a všechny ostatní složky místě budou zobrazeny bloky, jen různé velikosti. Zpočátku, všechny tyto bloky jsou po sobě. Jak je uvedeno v níže uvedeném příkladu je kódový řetězec jít jeden po druhém, a tak se zdají být zcela za sebou.

To se nazývá normální průtok (normální průtok). Když všechny tyto bloky spadají do sebe (tělo bez křížení prvků) ve svislém směru. Zpočátku celý obsah internetových stránek umístěných tímto způsobem. Nicméně, při použití, například vlastnosti CSS Float Left jazyk element opustí svou přirozenou pozici na stránce a pohybuje se na levé straně. Toto chování vede k nevyhnutelnému střetu s těmito prvky, které zůstaly v běžném.

Jinými slovy, prvky jsou místo toho umístěny vertikálně, jsou nyní vedle sebe. Pokud rodič element je dostatečný prostor, aby mohla pojmout dvě děti dovnitř a nedochází ke kolizi, ale pokud ne, uložení jednoho objektu do druhého je nevyhnutelný. Je nesmírně důležité mít na paměti, pro pochopení vlastností Float CSS.

Clear funkce k řešení problémů

Jsme Float má srdce každého - Clear. Společně - nemají úniku do vodních toků. Obě tyto vlastnosti se vzájemně doplňují, a aby se developer spokojený. Jak bylo uvedeno výše, sousední buňky jít ven ze svého běžného a také začít „plavat“ jako prvku, který byl použit majetek Float (například CSS Float Top). Výsledkem je, že místo toho, plovoucí prvek dostane dva, a to v místě, kde hodlali zařídit vývojáře. Od té chvíle teprve začíná všechny problémy.

Na Clear funkce má pět hodnot:

• Levé;
• : Pravý;
• : Oba;
• : Zdědit;
• none;

Analogicky můžeme pochopit, když to je nejlepší použít funkci clear. Pokud bychom psali řádek v kódu float: right; (CSS kód je určen), tato funkce musí být jasné: right ;. Stejné vlastnosti hornin a float: left; to doplní jasná: doleva; , Při psaní kódu jasně: oba; Ukazuje se, že prvek, na který je aplikován, bude tato funkce bude nižší než prvky, které uplatňují funkci plováku. Zdědit bere nastavení z nadřazeného prvku, ale nikdo nedělá žádné změny ve struktuře webu. и CSS Float-код, который сделает ваш веб-сайт единственным в своем роде. Máte-li porozumět tomu, jak Float a jasné funkce, můžete napsat jedinečný a neobvyklý HTML a CSS Float-kód, který bude vaše webové stránky jedinečná svého druhu.

Použití funkce Plovoucí vytvořit sloupce

Float zvláště užitečnou funkci při vytváření kolon na místě (nebo umístění obsahu CSS vznášet se ve středu webové stránky). Je tento kód je nejpraktičtější a pohodlné, takže byste měli vzít v úvahu několik možností pro vytvoření obvyklé šablony stránky, která se skládá ze dvou sloupců. Například se standardní webové stránky s obsahem na levém navigačním panelu (navigační liště) na pravé straně, záhlaví a zápatí. Tento kód vypadá takto:

Nyní musíme pochopit, co je zde napsáno. Mateřská prvek, ve kterém je hlavní část html kódu nazývá kontejner (kontejner). To umožňuje zabránit prvků, které jsou aplikovány funkce Float rozptýlit v různých směrech. Kdyby to nebylo, pak tyto prvky vznášel až k hranicím prohlížeče.

Potom, v kódu a jít #content #navigation. Tyto prvky se používají funkci plováku. #content poslal doleva a doprava je #navigation. Je nutné vytvořit web se dvěma sloupci. Ujistěte se, že určit šířku, takže objekty nepřekrývají navzájem. Můžete určit šířku a procento. Takže ještě pohodlnější než v pixelech. Například, 45% až 45% a pro #content #navigation, a zbývajících 10%, čímž se získá vlastnost rozpětí.

Vlastnost Clear, která je v #footer, nevyplývá zápatí #navigation a #content, ale ponechává ji na stejném místě, kde byl. Co se může stát? Pokud nemáte jasně specifikovat majetek? V tomto kódu #footer prostě jít nahoru a bude pod #navigation. To se děje v důsledku skutečnosti, že #navigation dostatek prostoru pro více než jeden prvek. V tomto ilustrativním příkladu je jasně vidět, jak se vlastnosti čirého plaveného a vzájemně doplňují.

Potíže se mohou vyskytnout při psaní kódu

Výše uvedené příklady jsou jednoduché. Ale s nimi mohou způsobit problémy. Obecně platí, že ve skutečnosti, hodně nečekané problémy se může stát Float funkci. Bez ohledu na to, jak podivné, ale problémy se obvykle nevyskytují u CSS a HTML kód. Místo, kde je prvek s funkcí Float v html kódu, které přímo ovlivňují chod druhé. Aby se zabránilo různé druhy potíží, to je nejlepší držet se jednoduchých pravidel - polohovací prvky Float funkci prvního kódu. Téměř vždy to funguje a minimalizovat jejich neočekávané chování.

Souboj elementů

Dochází ke kolizi, když je nadřazený prvek obsahuje více dítě nemůže pojmout všechny, a které se vzájemně překrývají. Dokonce se stává, že předměty se nemusí objevit, a zmizí z webu. To není chyba prohlížeče, a očekává se, a správné chování prvků s funkcí Float.

Vzhledem k tomu, že tyto prvky jsou zpočátku v rámci běžného, a pak je to rozbité Float vlastnost prohlížeč je může odstranit z webu. Ale nezoufejte, protože řešení je jednoduché a jasné - použijte vlastnost Cear. Možná proto, že ze všech způsobů, jak z tohoto problému je použití Clear je nejúčinnější.

Ale problém kolize prvků webových stránek mohou být řešeny jiným způsobem. Existují nejméně dva způsoby:

• Umístěte použití funkce;
• Aplikace flexboxu.

Funkce pozice je často dobrou alternativou k CSS Float. Ve středu webové stránky v případě žádosti postoje je nejlepší umístit obraz. Je-li správně použity hodnoty: absolutní a: relativní, prvky zapadne na své místo, a se vzájemně nepřekrývají.

Pozice Analýza a Float kód funkce

и CSS Float заменить на Position. To by mělo více zabývat s tím, jak v HTML a CSS Float nahrazena postoje. Ve skutečnosti je to velmi jednoduché. Řekněme, že existuje prvek #container a #div.

#container {

Šířka: 40%;

float: left;

margin: 10px;

}

#div {

šířka: 40%;

float: právo;

margin: 10px;

}

#footer {

jasné: obě;

}

V tomto příkladu je použití funkcí ve druhé nádobě (CSS Div) Float pomůže vytvořit standardní místo dvou sloupců. Nikdy nezapomenu na Clear funkci. Bez ní vloží pouze prvky na sebe.

Tak jak se vám změnit CSS a Float kód používat místě.? Velmi jednoduchý:

#container {

šířka: 40%;

Pozice: relativní;

margin: 10px;

}

#div {

šířka: 40%;

Pozice: relativní;

margin: 10px;

}

V tomto případě #container #div a přijmout nezbytná pozici developera v nadřazený prvek. Hlavní věc? dát #div a #container jeden nadřazený prvek, který bude odpovídat na jejich velikosti.

Flexboxu - tato funkce nahradí CSS Float?

Flexboxu - nejmodernější způsob, jak vytvořit webové stránky v okamžiku, takže tato funkce není podporována staršími verzemi prohlížečů. Tuto skutečnost nelze zlevněné pro uživatele se staršími verzemi prohlížečů nebude moci vidět správnou verzi stránek.

Flexboxu není vlastnost, jako samostatný modul. Proto flexboxu podporuje celou řadu vlastností, které pracují pouze s ním. Kromě toho, funkční displej, který má tři parametry in-line, blokové a inline-blok v flexboxu je tam jen jeden flex-flow.

Jak flexboxu?

Tato technologie pomáhá vývojářům snadno sladit prvky horizontálně i vertikálně. Flexboxu lze také změnit směr a pořadí zobrazení prvků. V této technologie, existují dvě osy: Hlavní osa a příčná osa, kolem které se celý flexboxu postavené. To také odstraňuje efekt Float a jasné funkce. Ten staví svůj systém v kódu, který používá jedinečný ke svému vlastnictví, takže bohužel, nebudou moci replikovat v buňkách jiné vlastnosti, jako je například Float a postoje. A to by bylo velmi užitečné, protože, jak již bylo uvedeno výše, flexboxu pracovat pouze v novějších verzích prohlížečů.

Je třeba připomenout, že v koncové poloze, flexboxu Float a to samé - vytvořit nevšední a originální design svých stránek. Každá verze je uvedeno v článku to dělá po svém, a proto má své výhody i nevýhody. Navíc se stává, že někde dokonalá funkce Float (například v místě s jednoduchou strukturou), ale někde lepší použít poloze nebo flexboxu.

Double Margin Bug

Někdy však, bohužel, vždy problémy developerské nevyplývá z písemné části kódu, s chybami a v nějaké konkrétní formě prohlížeče. Například v aplikaci Internet Explorer, je chyba, která se nazývá Double Margin Bug. On rozmnožuje parametru Margin na dva, což má za následek posunutí prvků místě hranice prohlížeče. Aby se tomu zabránilo, je dostatečné k určení parametru Margin procento. Obvykle se tato chyba nastane, pokud je hodnota y a vlastností Margin Float bodu.

#div {

float: left;

margin-left: 10px;

}

Tento kód se posune prvek v aplikaci Internet Explorer 20 px vlevo. Můžete upravit kód takto:

#div {

float: left;

margin-left: 10%;

}

nebo tak nějak

#div {

float: left;

margin-right: 10px;

}

Obě tyto možnosti bude řešit problém posunutí prvků.

Chyby prohlížeč a nesprávné zobrazení stránky

Stojí za to si uvědomit, že Internet Explorer - není jediný prohlížeč, který může nastat chyby. Starší verze aplikace Google Chrome a Mozilla také nesprávně zobrazuje některé prvky moderních webových stránek. Pro každý z těchto oprav, můžete najít řešení. Obecně lze konstatovat, že použití Float vytvoří originální a atraktivní design webu. Pochopení základy a principy tohoto majetku pomůže vyhnout se chybám a usnadnit život každého vývojáře.