аватар |

Уроки / CSS /

Урок 10. Плавающие элементы

Что это такое? Плавающие элементы, а или говоря проще - обтекаемые элементы, играют важную роль при верстке страницы сайта. Сейчас, в эпоху адаптивного и резинового дизайнов, позиции элементов не фиксируются, а имеют направление при выравнивании. Однако, они ещё должны сочетаться с другими - быть обтекаемыми. Например, Вы вставляете изображение и хотите, чтобы текст его обтекал. Для этого используется только одно свойство - float.




float


Данное свойство отвечает одновременно за расположение элемента и обтекание его другими элементами (текстом, блоками и тд). Обтекание элемента может происходить с двух сторон: слева и справа.

left - элемент прижимается к левому краю, а другие элементы обтекают его с правой стороны.
right - элемент прижимается к правому краю, а другие элементы обтекают его с левой стороны.

.left {
  float: left;
}

Элемент с классом left будет расположен слева, а другие будут его обтекать с правой стороны и снизу (под элементом).

А можно ли отменить обтекание?


clear


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

both - отменяет обтекание со всех сторон.
left - отменяет обтекание с левого края.
right - отменяет обтекание с правого края.

.clear {
  clear: both;
}

А теперь рассмотрим пример. 

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Плавающие элементы в CSS</title>
  
<style>
.left {
  float: left;
}
.right {
  float: right;
}
.clear {
  clear: both;
}
</style>
  
</head>

<body>

    <div class="left">Текст в левом блоке. Теперь изменяйте размеры окна. Шаблонный текст... Шаблонный текст...</div>
    
    <div class="clear"></div>
    
    <div class="right">Правый блок. Вы видите, что он расположен ниже первого, так как выше использовано свойство clear: both</div>
  
</body>
</html>

ЗЫ: Изменяйте размеры окна браузера и следите за изменениями)

Демонстрация Скачать исходники


Спасибо за внимание!
 



Распечатать
Похожие статьи
30 июля 2013 13:06 Урок 3. Псевдоклассы и псевдоэлементы
13 мая 2014 16:19 Урок 6. Отступы и поля в CSS. Что такое margin и padding?
30 января 2013 16:49 Урок 1. Как подключить таблицу стилей CSS?
07 июля 2013 13:18 Урок 2. Селекторы и правила CSS
11 августа 2013 22:25 Урок 5. Выравнивание текста в CSS


Комментарии к статье (vk.com)