/css/float:> Выравнивание объекта_
Свойство float
Синтаксис
CSS 1
CSS 2‒2.2
CSS 3
float: left | right | none | inherit
Описание
Свойство float указывает сторону, по которой будет выровнен элемент. (При этом элементы следующие за этим объектом будут обтекать его с противоположной стороны.)
| Применяется: |
CSS 1 ‒ ко всем элементам,
CSS 2-3 ‒ ко всем элементам, кроме элементов с «
display: none;» и элементов с position: absolute || fixed;. |
|---|---|
| Наследование: | отсутствует; |
| Проценты: | не используются; |
| Медиа: | визуальные. |
JavaScript
[объект]
[объект] (для IExplorer до 8 версии включительно.)
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
Значения
- none
- Отменяет выравнивание.
float: none; - left
- Выравнивание по левой стороне (прочее содержимое документа обтекает элемент по правой стороне).
float: left; - right
- Выравнивание по правой стороне (прочее содержимое документа обтекает элемент по левой стороне).
float: right; - inherit
- Указывает, что элемент должен унаследовать значение родительского элемента.
Начальное значение: «none».
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство float</title>
<style type="text/css">
.box1 {
width: 50px;
height: 50px;
background-color: #008614;
border: 1px solid black;
float: left; /* Выравнивание по левому краю */
}
.box2 {
display: inline-block;
width: 20px;
height: 20px;
background-color: red;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Выравнивание объекта</h1>
<div class="box1">1</div>
<div class="box2">2</div>
<p>Жизнь надо прожить так, чтобы на небесах сказали "Повтори". Или в аду "Добро пожаловать, наш Господин".</p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство float</title>
<style type="text/css">
.box1 {
width: 50px;
height: 50px;
background-color: #008614;
border: 1px solid black;
float: left; /* Выравнивание по левому краю */
}
.box2 {
display: inline-block;
width: 20px;
height: 20px;
background-color: red;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Выравнивание объекта</h1>
<div class="box1">1</div>
<div class="box2">2</div>
<p>Жизнь надо прожить так, чтобы на небесах сказали "Повтори". Или в аду "Добро пожаловать, наш Господин".</p>
</body>
</html>
Свойство float