Нека да разгледаме дизайна на мрежата на сайта и да разделим отделните компоненти. Нека да проучим защо float е толкова полезен, както и популярната техника за изграждане на първата уеб мрежа от три потока и долен колонтитул на сайта.
За да проучите мрежовата конструкция на даден обект, трябва да разберете какво е „поток“. Поток са елементите на сайта, разположени един след друг. Например, това могат да бъдат div елементи, които се движат един след друг по подразбиране. Но потокът може да бъде пренареден и позицията на блоковите елементи може да бъде променена.
За да контролираме потока, използваме свойството float, което може да постави блока от лявата или дясната страна. Достатъчно е да напишете в CSS файла:
"име на клас или блок" {float: надясно / наляво; }
Единственият недостатък на float е възможността да се "припокриват" един блок върху друг.
За да избегнем прегазване, използваме clear: both - това свойство ще зададе потока около блока. Задаваме ширината и височината, като максимална и минимална, така че стойността да се формира според размера на съдържанието (текст, изображения). Margin - задайте стойността на auto, така че външните полета да се формират автоматично в зависимост от местоположението на блока.
Тъй като float може да поставя блокове в две посоки, обичайно е сайтът да се разделя на потоци - ляво и дясно. Ако програмистът се нуждае само от два потока, тогава той оставя левия и десния плаващ, но ако има повече от два, тогава той коригира полетата, използвайки полето. Как се случва това:
.column1 {float: left; ширина: 65px; минимална височина: 50px; поле вдясно: 9px; // 9px от централната кутия}
2 поток:
.column2 {float: left; // към левия блок, но без "припокриване", тъй като приложихме ширина на полето: 80px; мин-височина: 50px; }
3 поток:
.column3 {float: вдясно; ширина: 65px; минимална височина: 50px; }
Справяне с долния колонтитул (.footer):
.footer {ясно: и двете; // увиваме около двете страни}
Ето как направихме мрежа за сайта с помощта на поплавък, състоящ се от три потока.
