Перейти к содержанию

float

Свойство float определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.

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

Демо

Позиционирование

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
/* Keyword values */
float: left;
float: right;
float: none;
float: inline-start; /* Только Firefox 55+ */
float: inline-end; /* Только Firefox 55+ */

/* Global values */
float: inherit;
float: initial;
float: unset;

Значения

left

Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне.

right

Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.

none

Обтекание элемента не задаётся.

Значение по-умолчанию:

1
float: none;

Применяется к: Ко всем элементам (за исключением абсолютно позиционированных)

Спецификации

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>float</title>
        <style>
            .pull-left {
                float: left; /* Обтекание блока по правому краю */
                padding-right: 10px;
            }
        </style>
    </head>
    <body>
        <div class="pull-left">
            <img src="image/figure.jpg" alt="" />
        </div>
        <p>
            Бихевиоризм, как бы это ни казалось
            парадоксальным, просветляет сублимированный
            стимул, так, например, Ричард Бендлер для
            построения эффективных состояний использовал
            изменение субмодальностей.
        </p>
    </body>
</html>

Комментарии