Pojďme se podívat na design mřížky webu a rozebrat jednotlivé komponenty. Pojďme prozkoumat, proč je float tak užitečný, stejně jako populární techniku pro vytváření první webové mřížky ze tří proudů a zápatí webu.
Chcete-li studovat konstrukci mřížky webu, musíte pochopit, co je „tok“. Flow jsou prvky webu, které se nacházejí jeden po druhém. Mohou to být například prvky div, které ve výchozím nastavení jdou jeden za druhým. Průtok však lze přeskupit a lze změnit polohu blokových prvků.
K řízení toku používáme vlastnost float, která může umístit blok na levou nebo pravou stranu. Do souboru CSS stačí napsat:
"název třídy nebo bloku" {float: right / left; }
Jedinou nevýhodou floatu je schopnost „překrývat“jeden blok nad druhým.
Abychom se vyhnuli přejetí, použijeme clear: both - tato vlastnost nastaví tok kolem bloku. Šířku a výšku nastavíme jako maximální a minimální, aby se hodnota formovala podle velikosti obsahu (text, obrázky). Okraj - nastavte hodnotu na auto, aby se vnější okraje vytvářely automaticky v závislosti na umístění bloku.
Vzhledem k tomu, že float může umístit bloky ve dvou směrech, je obvyklé rozdělit web na proudy - levý a pravý. Pokud programátor potřebuje pouze dva proudy, nechá levý a pravý plovák, ale pokud jsou více než dva, upraví okraje pomocí okraje. Jak se to stane:
.column1 {float: left; šířka: 65px; min. výška: 50px; pravý okraj: 9px; // 9px od středového rámečku}
2 stream:
.column2 {float: left; // do levého bloku, ale bez „překrytí“, protože jsme použili šířku okraje: 80px; min. výška: 50px; }
3 stream:
.column3 {float: right; šířka: 65px; min. výška: 50px; }
Řešení zápatí (.footer):
.footer {clear: both; // obtočit obě strany}
Takto jsme vytvořili mřížku pro web pomocí float, skládající se ze tří proudů.
