Пример плавания CSS

Эта страница предоставляет примеры общих флоатов.

Мешок / Блоки с одинаковой шириной

Box 1
Box 2
Box 1
Box 2
Box 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.

Изображения в один ряд

Этот тип сетки (The grid of boxes) также можно использовать для выравнивания изображений в один ряд:

Пример

.img-container {
  float: left;
  width: 33.33%; /* Три блока (четыре блока используют 25%, два блока используют 50% и т.д.) */
  padding: 5px; /* Если нужно добавить промежуток между изображениями */
}

Попробуйте сами

Блоки с одинаковой шириной

В предыдущем примере вы узнали, как выравнивать флоаты в один ряд с одинаковой шириной. Однако создание флоатов с одинаковой высотой не так легко. Однако быстрое решение - установить фиксированную высоту, как показано в следующем примере:

Box 1

Некоторый контент, неконтент, неконтент

Box 2

Некоторый контент, неконтент, неконтент

Некоторый контент, неконтент, неконтент

Некоторый контент, неконтент, неконтент

Пример

.box {
  height: 500px;
}

Попробуйте сами

Но, делая это, вы теряете гибкость. Если вы можете гарантирует, что в рамке всегда будет одинаковое количество контента, это можно. Но часто контент разный. Если вы попробуете пример на телефоне, вы увидите, что содержимое второго блока будет показано за рамками. Это то место, где приходит на помощь CSS3 Flexbox -因为他 может автоматически растягивать рамки, чтобы они были такие же длины, как и самая длинная рамка:

Пример

Создание гибкого блока с помощью Flexbox:

Box 1 - это текст, чтобы убедиться, что контент действительно высокий. Это текст, чтобы убедиться, что контент действительно высокий. Это текст, чтобы убедиться, что контент действительно высокий. Это текст, чтобы убедиться, что контент действительно высокий. Это текст, чтобы убедиться, что контент действительно высокий.
Box 2 - высота моего будет следовать за рамкой 1.

Попробуйте сами

Единственная проблема Flexbox в том, что он не работает в Internet Explorer 10 и более ранних версиях. Вы можете найти информацию о нас Flexbox CSS Изучите больше о модуле Flexbox в разделе.

Меню навигации

Перемещение float Используйте их вместе с списками гиперссылок для создания горизонтального меню:

Пример

Попробуйте сами

Примеры Web-разметки

Использование float Свойство завершает целостную Web-разметку:

Пример

.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%;
}

Попробуйте сами

Более примеров

Изображение с рамкой и внешними полями плавает вправо от абзаца
Пусть изображение будет плавающей вправо от абзаца. Добавьте рамку и внешние поля к изображению.
Изображение с заголовком плавает вправо
Пусть изображение с заголовком будет плавающей вправо.
Пусть первая литера абзаца будет плавающей влево
Пусть первая литера абзаца будет плавающей влево и стиль этой литера будет установлены.
Создание веб-сайта с помощью плавания
Использование плавания для создания главной страницы с горизонтальным меню навигации, заголовком, нижним колонтекстом, левой навигацией и主要内容ной частью.

Все CSS-свойства плавания

Свойство Описание
box-sizing Определение способа вычисления ширины и высоты элементов: должны ли они включать внутренние поля и рамки.
clear Определяет, какие элементы могут плавать сбоку от элемента, который нужно удалить, и с какой стороны.
float Определяет, как элемент должен плавать.
overflow Определяет, что会发生, если содержимое перетекает за пределы рамки элемента.
overflow-x Определяет, как обрабатывать левый/правый край содержимого, когда содержимое элемента перетекает за границу области.
overflow-y Определяет, как обрабатывать верхний/нижний край содержимого, когда содержимое элемента перетекает за границу области.