Для изучения сеточного построения сайта необходимо понимать, что такое "поток". Поток — это элементы сайта, расположенные друг за другом. Например, это могут быть div-элементы, которые по умолчанию идут друг за другом. Но поток можно перестроить, и изменить положение блочных элементов. 


Для управления потоком используем свойство float, которое может поместить блок в левой стороне или правой. В CSS файле достаточно прописать:

"название класса или блока" { float: right/left; }

Единственный недостаток float — это возможность "наезжания" одного блока на другой. 


Чтобы избежать наезжания, используем clear: both — это свойство настроит обтекание блока. Задаем ширину и высоту, как максимум и минимум, чтобы значение формировалось по размеру содержания (текста, изображений). Margin - задаем значение auto для того, чтобы внешние отступы формировались автоматически в зависимости от расположения блока. 

Так какfloat может размещать блоки по двум направлениям, то принято делить сайт на потоки — левый и правый. Если программисту необходимо только два потока, то он оставляет левый и правый float, но если более двух, то он настраивает с помощью margin отступы. Как это происходит: 

1 поток в CSS файле:

.column1 {     float: left;     width: 65px;     min-height: 50px;     margin-right: 9px; // на 9px от центрального блока }

2 поток: 

.column2 {     float: left; // к левому блоку, но без "наезжания", так как применили margin     width: 80px;      min-height: 50px;  }


3 поток: 

.column3 {     float: right;     width: 65px;      min-height: 50px;  }


Разбираемся с подвалом (.footer): 

.footer {     clear: both; // обтекание с обеих сторон }


Вот так с помощью float мы сделали сетку сайту, состоящую из трёх потоков.