CSS Поплавок
CSS float
Cвойство float указывает, является ли элемент поплавком.
Cвойство clear используется для управления поведением плавающего элемента.
Cвойство поплавок
Свойство float может использоваться, чтобы обернуть текст вокруг изображения.
В примере указывается, что изображение смещаеться в тексте вправо:
Пример - float: left;
В следующем примере указано, что изображение должно располагаться слева в тексте:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
Пример - Плавающих нет
В следующем примере изображение будет отображаться именно там, где оно встречается в тексте (float: none;):
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
Пример - Плавают рядом друг с другом
Обычно элементы div отображаются друг на друге. Однако, если мы используем float: left, мы можем позволить элементам плавать рядом друг с другом:
Пример
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}
Попробуйте сами »