ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

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

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

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

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

CSS Макет - float и clear


CSS свойство float указывает, как элемент должен плавать, т.е. размещаться на странице относительно других элементов.

CSS свойство clear указывает, какие элементы могут плавать рядом с очищаемым элементом и на какой стороне.




Свойство float

Свойство float используется для позиционирования и форматирования контента, например позволяет изображению плавать слева от текста в контейнере.

Свойство float может иметь одно из следующих значений:

  • left - Элемент плавает слева от своего контейнера
  • right - Элемент плавает справа от своего контейнера
  • none - Элемент не плавает (будет отображаться только там, где он встречается в тексте). Это по умолчанию
  • inherit - Элемент наследует значение float своего родителя

В простейшем случае свойство float можно использовать для обтекания текста вокруг изображений.


Пример - float: right;

В следующем примере показано, что изображение должно плавать right (справа) от текста:

PineappleLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

Пример

img {
  float: right;
}
Попробуйте сами »

Пример - float: left;

В следующем примере показано, что изображение должно плавать left (слева) от текста:

PineappleLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

Пример

img {
  float: left;
}
Попробуйте сами »

Пример - Нет float

В следующем примере изображение будет отображаться именно там, где оно встречается в тексте (float: none;):

Pineapple Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

Пример

img {
  float: none;
}
Попробуйте сами »

Свойство clear

Свойство clear указывает, какие элементы могут плавать рядом с очищаемым элементом и на какой стороне.

Свойство clear может иметь одно из следующих значений:

  • none - Допускает плавающие элементы с обеих сторон. Это по умолчанию
  • left - Не допускаются плавающие элементы на левой стороне
  • right- Не допускаются плавающие элементы на правой стороне
  • both - Не допускаются плавающие элементы ни слева, ни справа
  • inherit - Элемент наследует чистое значение своего родителя

Наиболее распространенный способ использования свойства clear - после использования свойства float для элемента.

При очистке float вы должны сопоставить clear с float: если элемент перемещается влево, то вы должны очистить слева. Ваш перемещенный элемент будет продолжать плавать, но очищенный элемент появится под ним на веб-странице.

Следующий пример очищает плавающий элемент слева. Это означает, что не допускаются плавающие элементы на левой стороне (div):

Пример

div {
  clear: left;
}
Попробуйте сами »

Хак clearfix

Если элемент выше, чем элемент, содержащий его, и он является плавающим, он будет "переполнен" за пределами своего контейнера:

Без Clearfix

Без clearfix

Из Clearfix

Из clearfix

Затем мы можем добавить overflow: auto; к содержащему элементу, чтобы решить эту проблему:

Пример

.clearfix {
  overflow: auto;
}
Попробуйте сами »

Clearfix overflow: auto работает хорошо, если вы можете контролировать свои поля и отступы (иначе вы можете увидеть полосы прокрутки). Однако новый современный хак clearfix безопаснее в использовании, и для большинства веб-страниц используется следующий код:

Пример

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
Попробуйте сами »

Подробнее о псевдоэлементе ::after вы узнаете в следующей главе.


Сетка блоков / Блоки равной ширины

Блок 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.


Изображения друг за другом

Italy
Forest
Mountains

Сетка блоков также может быть использована для отображения изображений друг за другом:

Пример

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

Блоки равной высоты

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

Блок 1

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

Блок 2

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

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

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

Пример

.box {
  height: 500px;
}
Попробуйте сами »

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

Пример

Использование Flexbox для создания гибких блоков:

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

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


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

Используйте 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 Определяет, что делать с верхним / нижним краями содержимого, если оно выходит за пределы области содержимого элемента