Porozumění CSS Float

Použití funkce CSS Float Vlastnost pro návrh rozvržení webové stránky

Vlastnost CSS je velmi důležitá vlastnost pro uspořádání. Umožňuje vám umístit návrhy webových stránek přesně tak, jak si je přejete, aby se zobrazovaly, ale pro jejich použití musíte pochopit, jak to funguje.

V listu stylů vypadá vlastnost floating CSS takto:

.right {float: right; }}

To řekne prohlížeči, že všechno s třídou "vpravo" by mělo být spuštěno napravo.

Přiřadíte jej takto:

class = "right" />

Co můžete plavat s vlastností floating CSS?

Nemůžete plavat každý prvek na webové stránce. Můžete pouze pohybovat prvky na úrovni bloku . Jedná se o prvky, které na stránce zabírají blok prostoru, jako jsou obrázky (), odstavce (), divize () a seznamy ().

Další prvky, které ovlivňují text, ale nevytvářejí pole na stránce, se nazývají vložené prvky a nemohou být propuštěny. Jsou to prvky jako span (), řádkové zlomy (), silný důraz () nebo kurzíva ().

Kde plují?

Můžete posunout prvky vpravo nebo vlevo. Jakýkoliv prvek, který následuje po plovoucím prvku, bude proudit kolem plovoucího prvku na druhé straně.

Například, pokud budu plavat vlevo, jakýkoli text nebo jiné elementy, které následují, budou protékat kolem něj vpravo. A pokud budu plavat vpravo, jakýkoli text nebo další prvky, které následují, budou protékat doleva. Obrázek, který je umístěn v bloku textu bez jakéhokoli plaveného stylu, se zobrazí, ale prohlížeč je nastaven tak, aby zobrazoval obrázky.

Obvykle se zobrazí první řádek následujícího textu v dolní části obrázku.

Jak daleko budou plavat?

Prvek, který se pohyboval, se bude pohybovat co nejdále vlevo nebo vpravo od prvku kontejneru. Výsledkem je několik různých situací v závislosti na tom, jak je kód napsán.

Pro tyto příklady budu plavat malý element DIV nalevo:

Můžete dokonce použít plováky k vytvoření rozložení fotogalerie. Každou miniaturu dáte (to funguje nejlépe, pokud jsou všechny stejné velikosti) v DIV s popisem a plovoucí prvky DIV v kontejneru.

Bez ohledu na to, jak široké je okno prohlížeče, miniatury se budou rovnoměrně vyrovnat.

Vypnutí plováku

Jakmile budete vědět, jak získat prvek, který má plavat, je důležité vědět, jak vypnout plovák. Vypnete plovák pomocí vlastnosti CSS clear. Můžete vyčistit levé ploutve, pravé plavidla nebo obojí:

jasné: vlevo;
jasné: vpravo;
jasné: obě;

Jakýkoli prvek, který nastavíte vyčistit vlastnost pro, se zobrazí pod prvek, který je pohybován tímto směrem. Například v tomto příkladu nejsou první dva odstavce textu vymazány, ale třetí je.

Hrajte s jasnou hodnotou různých prvků v dokumentech, abyste získali různé efekty rozvržení.

Jedním z nejzajímavějších vznášených rozložení je řada snímků vlevo nebo vpravo vedle odstavců textu. Dokonce i když text není dostatečně dlouhý na to, aby se mohl posunout po obraze, můžete použít zaškrtnutí na všech obrázcích, abyste se ujistili, že se ve sloupci zobrazují spíše než vedle předchozího obrázku.

HTML (zopakujte tento odstavec):


Překročte svůj čas, aby se zabránilo dočasnému vyloučení. Použijte jiný prozíravý úředník a dolu magna aliqua.

CSS (pro plovoucí obrázky doleva):

img.float {float: left;
jasné: vlevo;
margin: 5px;
}}

A vpravo:

img.float {float: right;
jasné: vpravo;
margin: 5px;
}}

Používání plovoucích prvků pro rozvržení

Jakmile pochopíte, jak funguje vlastnost float, můžete ji začít používat pro rozvržení vašich webových stránek. Jedná se o kroky, které podniknu při vytváření floated webové stránky:

Dokud znáte šířky (v procentech jsou v pořádku) vašich rozložení, můžete použít vlastnost float, abyste je uvedli tam, kde patříte na stránku. A hezká věc je, že se nemusíte starat tolik, kolik je model krabice odlišný pro Internet Explorer nebo Firefox.