CSS Макет - Примеры float
Эта страница содержит распространенные с примерами float.
Сетка с боксами/коробками равной ширины
Бокс 1
Бокс 2
Бокс 1
Бокс 2
Бокс 3
С помощью CSS свойства float легко размещать бок о бок блоки с содержимым:
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; /* три бокса (используйте 25% для четырех, 50% для двух и т.д.)*/
padding:
50px; /* если вам нужно пространство между изображениями */
}
Попробуйте сами »
Что такое размер бокса?
Вы можете легко создать три плавающих бокса рядом. Однако, когда вы добавляете что-то, что увеличивает ширину каждого поля (например, отступы или границы), поле разрывается. CSS свойство box-sizing позволяет нам включать отступы и границы в общую ширину (и высоту) поля, гарантируя, что отступы остаются внутри поля и что они не ломаются.
Вы можете прочитать больше о CSS свойстве определения размера бокса в Главе о размерах CSS бокса.
Изображения бок о бок
Сетка блоков также может использоваться для отображения изображений бок о бок:
.img-container {
float: left;
width: 33.33%; /* три контейнера (используйте 25% для четырех, 50% для двух и т.д.) */
padding: 5px; /* если вам нужно пространство между изображениями */
}
Попробуйте сами »
Боксы одинаковой высоты
В предыдущем примере вы узнали, как размещать блоки рядом друг с другом одинаковой ширины. Однако создать плавающие ящики одинаковой высоты непросто. Однако быстрое решение заключается в установке фиксированной высоты, как в примере ниже:
Бокс 1
Какой-то контент, какой-то контент, какой-то контент
Бокс 2
Какой-то контент, какой-то контент, какой-то контент
Какой-то контент, какой-то контент, какой-то контент
Какой-то контент, какой-то контент, какой-то контент
.box {
height: 500px;
}
Попробуйте сами »
Однако не очень гибко. Это нормально, если вы можете гарантировать, что в коробках всегда будет одинаковое количество содержимого. Но во многих случаях содержание не одно и то же. Если вы попробуете приведенный выше пример на мобильном телефоне, вы увидите, что содержимое второго окна будет отображаться за пределами окна. Вот где пригодится CSS Flexbox - поскольку он может автоматически растягивать коробки до длины самого длинного блока:
Использование Flexbox для создания гибких коробок:
Совет: Вы можете прочитать больше о модуле компоновки Flexbox в главе CSS Flexbox.
Навигационное меню
Вы также можете использовать CSS свойство float со списком гиперссылок для создания горизонтального меню:
Пример веб-макета с float
Также часто для создания целых веб-макетов используется CSS свойство float:
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content:
"";
clear: both;
display: table;
}
.menu {
width: 25%;
}
.content {
width: 75%;
}
Попробуйте сами »
Еще примеры с float
Изображение с границей и полем, плавает справа в параграфе.
Пусть плавают картинки справа в параграфе. Добавить границы и поля к изображению.
Изображение с подписью плавает справа
Пусть изображение с подписью смещено вправо.
Первая буква параграфа плавает слева
Первая буква параграфа плавает слева и установлен стиль.
Создание домашней страницы без таблицы
Использовать float, чтобы создать сайт с помощью панели навигации, Шапка, Нижний колонтитул, Левый контент и Основное содержание.
Все CSS свойства поплавка
| Свойство | Описание |
|---|---|
| box-sizing | Определяет, как вычисляются ширина и высота элемента: должны ли они включать отступы и границы или нет |
| float | Указывает, где должен плавать элемент |
| overflow | Указывает, что произойдет, если содержимое переполняет элемент бокса |
| overflow-x | Указывает, что делать с левым и правым краями контента, если он переполняет область содержимого элемента |
| overflow-y | Указывает, что делать с верхним и нижним краями контента, если он переполняет область содержимого элемента |