CSS Макет - Примеры Float
Эта страница содержит общие примеры с float.
Сетка блоков / Блоки одинаковой ширины
Блок 1
Блок 2
Блок 1
Блок 2
Блок 3
С помощью свойства float можно легко размещать блоки с содержимым рядом друг с другом:
Пример
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; /* три блока (используйте 25% для четырех и 50% для двух и т.д.) */
padding: 50px; /* если вы хотите пространство между изображениями */
}
Попробуйте сами »
Что такое box-sizing (размер блока)?
Вы можете легко создать три плавающих блока рядом. Однако, когда вы добавляете что-то, что увеличивает ширину каждого блока (например, отступы или границы), блок ломается. Свойство box-sizing позволяет нам включать отступ и границу в общую ширину (и высоту) поля, следя за тем, чтобы отступы оставались внутри поля и не ломали блок.
Вы можете узнать больше о свойстве box-sizing в главе CSS box-sizing на нашем сайте W3Schools на русском.
Изображения друг за другом
Сетка блоков также может использоваться для отображения изображений рядом:
Пример
.img-container {
float: left;
width: 33.33%; /* три контейнера (используйте 25% для четырех и 50% для двух и т.д.) */
padding: 5px; /* если вы хотите пространство между изображениями */
}
Попробуйте сами »
Блоки одинаковой высоты
В предыдущем примере вы узнали, как размещать блоки друг возле друга с одинаковой шириной. Однако создать плавающие блоки одинаковой высоты непросто. Но есть быстрое решение - установить фиксированную высоту, как в примере ниже:
Блок 1
Какой-то контент контент, Какой-то контент контент, Какой-то контент контент
Блок 2
Какой-то контент, Какой-то контент, Какой-то контент
Какой-то контент, Какой-то контент, Какой-то контент
Какой-то контент, Какой-то контент, Какой-то контент
Однако это не очень гибкий вариант. Это нормально, если вы можете гарантировать, что в блоках всегда будет одинаковое количество содержимого. Но часто содержимое не одинаковое. Если вы попробуете приведенный выше пример на мобильном телефоне, вы увидите, что содержимое второго окна будет отображаться за пределами поля. Здесь пригодится CSS3 Flexbox - он может автоматически растягивать блоки до размера самого длинного блока:
Пример
Использование Flexbox для создания гибких блоков:
Единственная проблема с Flexbox заключается в том, что он не работает в Internet Explorer 10 или более ранних версиях. Вы можете узнать больше о модуле макета Flexbox в главе CSS Flexbox на нашем сайте W3Schools на русском.
Меню навигации
Используйте float со списком гиперссылок, чтобы создать горизонтальное меню:
Пример веб-макета
Также часто делают веб-макеты целиком с помощью свойства 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 свойства Float
| Свойство | Описание |
|---|---|
| box-sizing | Определяет, как рассчитываются ширина и высота элемента: должны ли они включать отступы и границы или нет |
| clear | Определяет, какие элементы могут плавать рядом с очищенным элементом и с какой стороны |
| float | Определяет, как элемент должен плавать |
| overflow | Указывает, что происходит, если содержимое выходит за пределы поля элемента |
| overflow-x | Определяет, что делать с левым / правым краями содержимого, если оно выходит за пределы области содержимого элемента |
| overflow-y | Определяет, что делать с верхними / нижними краями содержимого, если они выходят за пределы области содержимого элемента |
