• CSS Основы

• Что Такое CSS ?
• Синтаксис CSS
• Селекторы id и class
• Добавление Стилей в HTML Документ

• CSS Оформление

• CSS Фон
• CSS Текст
• Шрифты в CSS
• CSS Ссылки
• CSS Списки
• CSS Таблицы

• CSS Блоки

• CSS Блочная Модель
• CSS Границы
• CSS Контуры
• CSS Поля
• CSS Отступы

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

• Сгруппированные и Вложенные Селекторы
• CSS Размеры
• Отображение и Видимость Элементов
• CSS Позиционирование
• Плавающие Элементы
• CSS Выравнивание
• Псевдо Классы в CSS
• Псевдо Элементы в CSS
• Панель Навигации
• Галерея Изображений
• Прозрачность Изображений в CSS
• Спрайты Изображений
• CSS Медиа Типы
• Атрибутивные
  Селекторы
• Заключение

• CSS Примеры

• CSS Примеры

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

• CSS Справочник
• CSS Единицы Измерения
• CSS Значения Цветов
• CSS Названия Цветов
• CSS HEX Значения Цветов

Что Такое Плавающие Элементы CSS?

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

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

Как Ведут Себя Плавающие Элементы

Элементы плавают горизонтально, это означает, что элемент может плавать только слева или справа, но не снизу или сверху.

Плавающий элемент будет помещен влево или вправо настолько, насколько это возможно.

Элементы после плавающего элемента будут обтекать вокруг него.

Элементы до плавающего элемента не будут подвержены воздействию.

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

Плавающие Элементы, Следующие Друг за Другом

Если вы располагаете несколько плавающих элементов друг за другом, они будут "плавать" друг за другом, если позволяет пространство.

Здесь мы сделали галерею изображений, используя свойство float:

Отключение Float - Использование Clear

Элементы после плавающего элемента будут "плавать" вокруг него. Чтобы избежать этого, используйте свойство clear.

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

Добавим строку текста к галерее изображений, используя свойство clear:

Еще примеры

Изображение с границей и полями, которое плавает справа от параграфа
Позволить изображению плавать справа от параграфа. Добавить границу и поля к изображению.

Изображение с заголовком, которое плавает справа
Позволить изображению с заголовком плавать справа.

Позволить первой букве параграфа плавать слева
Позволить первой букве параграфа плавать слева. Оформить эту букву.

Создание горизонтального меню
Использование свойства float со списком гиперссылок с целью создать горизонтальное меню.

Создание главной страницы без таблиц
Используйте свойство float, чтобы создать главную страницу с заголовком, подвалом, левым столбцом (меню, например) и основным содержанием.

Все CSS Свойства Плавающих Элементов

Число в столбце "CSS" указывает, в какой версии CSS определено свойство (CSS1 или CSS2).