Как построить сетку сайта с помощью float
- Сеточное конструирование сайта с использованием float
- Что такое поток в сеточном построении сайта?
- Использование свойства float для управления потоком
- Настройка свойств ширины, высоты и отступов
- Деление сайта на потоки с использованием float
- Разбираемся с подвалом
- Вывод
Сеточное конструирование сайта с использованием float
Рассмотрим сеточную конструкцию сайта и разберем отдельные компоненты. Изучим, чем так полезен float, а также популярный прием построения первой веб-сетки из трех потоков и подвала сайта.
Что такое поток в сеточном построении сайта?
Для изучения сеточного построения сайта необходимо понимать, что такое "поток". Поток — это элементы сайта, расположенные друг за другом. Например, это могут быть div-элементы, которые по умолчанию идут друг за другом. Но поток можно перестроить, и изменить положение блочных элементов.
Использование свойства float для управления потоком
Для управления потоком используется свойство float, которое может поместить блок в левой стороне или правой. В CSS файле достаточно прописать:
```css
"название класса или блока" { float: right/left; }
```
Единственный недостаток float — это возможность "наезжания" одного блока на другой. Чтобы избежать наезжания, используется clear: both — это свойство настраивает обтекание блока.
Настройка свойств ширины, высоты и отступов
Для создания сеточной структуры сайта также важно задавать ширину и высоту блоков, чтобы значение формировалось по размеру содержания (текста, изображений). Для автоматического формирования внешних отступов в зависимости от расположения блока используется значение auto у свойства margin.
Деление сайта на потоки с использованием float
Так как float может размещать блоки по двум направлениям, принято делить сайт на потоки — левый и правый. Если программисту необходимо только два потока, то он оставляет левый и правый float, но если более двух, то он настраивает с помощью margin отступы.
Пример разделения сайта на три потока:
```css
/* 1 поток */
.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) сайта играет важную роль в его компоновке. Чтобы обеспечить правильное обтекание блоков, используется свойство clear: both.
Пример задания подвала:
```css
.footer {
clear: both; // обтекание с обеих сторон
}
```
Вывод
С помощью float можно создать сеточную конструкцию сайта, состоящую из трех потоков. Этот метод является популярным и эффективным способом организации контента на веб-странице. Используя свойства float, clear и настройку ширины, высоты и отступов, можно достичь гибкости и адаптивности веб-сайта.
