Атрибут CSS float
Рекомендации по курсу:
Определение и использование
Если плавающий элемент не является заменяемым элементом, то необходимо указать明确的 ширину; в противном случае, они будут как можно уже.
Комментарий:Если на строке выше есть очень мало места для плавающих элементов, то этот элемент перейдет на следующую строку, и этот процесс продолжится до тех пор, пока на какой-либо строке не будет достаточно места.
См. также:
Урок CSS:Позиционирование CSS
Руководство по HTML DOM:Свойство cssFloat
CSS синтаксис
float: none|left|right|initial|inherit;
Значение атрибута
| Значение | Описание |
|---|---|
| left | Элемент плавает в левую сторону. |
| right | Элемент плавает в правую сторону. |
| none | Значение по умолчанию. Элемент не плавает и отображается в том месте, где он появился в тексте. |
| inherit | Определяет, должны ли значения свойства float наследоваться от родительского элемента. |
Технические детали
| Значение по умолчанию: | none |
|---|---|
| Ингеритность: | no |
| Версия: | CSS1 |
| JavaScript синтаксис: | object.style.cssFloat="left" |
Пример TIY
- Простое применение свойства float
- Поставить изображение на правом крае абзаца.
- Поставить изображение с рамкой и границей на правом крае абзаца
- Поставить изображение на правом крае абзаца. Добавить к изображению рамку и границу.
- Изображение с заголовком на правом крае
- Поставить изображение с заголовком на правом крае
- Поставить первую букву абзаца на левом крае
- Поставить первую букву абзаца на левом крае и добавить к этой букве стиль.
- Создание горизонтального меню
- Использование浮动 с одной строкой гиперссылок для создания горизонтального меню.
- Создание первой страницы без таблицы
- Использование浮动 для создания первой страницы с заголовком, подзаголовком, левой таблицейcontents и основным содержимым.
Поддержка браузерами
Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
