Плавающие элементы

В этой главе:

  • Плавающие элементы

  • Отмена обтекания

Все HTML-элементы на веб странице располагаются в общем потоке, сверху вниз (для блочных элементов) и слева на право (для строчных элементов). Такой способ отображения мало эффективен, но благодаря CSS предоставляется возможность изменить дизайн в лучшую сторону.

Плавающие элементы

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

  • left - смещает элемент влево

  • right - смещает элемент вправо

  • none - отменяет плавание элемента

Единственным требованием для любого плавающего элемента является наличие фиксированной ширины (width).

Когда вы определяете плавающий элемент, вам нужно расположить его в коде прямо под тем элементом, под которым он должен "плавать", всё остальное содержимое расположенное в коде под плавающим элементом будет обтекать его на веб-странице. Рассмотрим более подробно то, как браузеры загружают плавающие элементы и остальное содержимое на веб-страницу.

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

Описание плавающего элемента

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

Обтекание плавающего элемента

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

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

Примечание: элементы с абсолютным и фиксированным позиционированием игнорируют свойство float.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p { width: 250px; }
      img { float: left; }
    </style>
  </head>
  <body>
    <p>
    <img src="css.png" width="120" height="120">
    С помощью свойства float изображению было задано обтекание с левой стороны.
    Текст, расположенный ниже картинки, будет обтекать изображение по левому краю.
    </p>
  </body>
</html>

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

1
2
3
4
img {
  float: left;
  margin: 0 10px 10px 0;
}

Отмена обтекания

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

Свойство clear допускает следующие значения:

  • left - плавающие элементы не разрешены с левой стороны.

  • right - плавающие элементы не разрешены с правой стороны.

  • both - плавающие элементы не разрешены с обоих сторон.

  • none - разрешает наличие плавающих элементов с обоих сторон.

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      div { width: 400px; }
      img { float: right; }
      p { clear: right; }
    </style>
  </head>
  <body>
    <div>
    <img src="logocss.gif" width="95" height="84">
    <p>С помощью свойства clear установлено, что плавающие элементы не разрешены
    с правой стороны.
    Текст, расположенный ниже картинки, не будет обтекать изображение по левому краю.</p>
    </div>
  </body>
</html>