CSS Макет - float и clear
CSS свойство float определяет, является ли элемент поплавком.
CSS свойство clear используется для управления поведением плавающего элемента.
CSS свойство float
CSS свойство float может использоваться для того, чтобы обернуть текст вокруг изображения.
В примере, изображение смещается в тексте вправо:
img {
float: right;
margin: 0 0 10px 10px;
}
Попробуйте сами »
Пример - 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.
img {
float: left;
}
Попробуйте сами »
Пример - float: none;
В следующем примере изображение будет отображаться именно там, где оно встречается в тексте (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.
img {
float: none;
}
Попробуйте сами »
Пример - плавают рядом друг с другом
Обычно элементы div отображаются друг на друге. Однако, если мы используем float: left, мы можем позволить элементам плавать рядом друг с другом:
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}
Попробуйте сами »