Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

CSS Учебник


CSS Продвинутый


CSS Отзывчивый


CSS Grid


CSS SASS


CSS Примеры


CSS Справочники



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 для создания гибких коробок:

Бокс 1 - Это некоторый текст, чтобы убедиться, что содержимое становится действительно высоким. Это немного текста, чтобы убедиться, что контент получается действительно объемным. Это немного текста, чтобы убедиться, что контент становится действительно высоким.
Бокс 2 - Мой рост будет следовать за боксом 1.
Попробуйте сами »

Совет: Вы можете прочитать больше о модуле компоновки 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 Указывает, что делать с верхним и нижним краями контента, если он переполняет область содержимого элемента


×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.