CSS Float
Свойство CSS
float
используется для позиционирования элемента на веб-странице.
Он может перемещать элемент вправо, влево или может унаследовать свойство плавания родительского элемента.
Также есть
clear
свойство, которое используется для указания направления, в котором другие плавающие элементы не разрешены.
ясно: значение;
CSS Float Свойства
| Имущество | Описание | Ценности |
|---|---|---|
| Чисто | влево, вправо, нет, наследовать | Он используется, чтобы избежать обтекания других плавающих элементов. |
| плавать | слева, справа, оба, нет, наследовать | Он придает элементу плавающее направление. |
Значения свойств CSS Float
| Ценности | Описание |
|---|---|
| никто | Это позиция элемента по умолчанию, т. Е. Элемент, отображаемый там, где он встречается в тексте. |
| Правильно | Он используется для перемещения элемента вправо. |
| левый | Он используется для перемещения элемента влево. |
| исходный | Он устанавливает начальное плавающее свойство элемента. |
| наследовать | Он указывает, что плавающее свойство родительского элемента будет унаследовано. |
CSS Float
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Float </title>
<meta charset="UTF-8">
<style>
#img {
float: right;
margin: 0 0 10px 10px;
}
</style>
</head>
<body>
<p><img id="img" src="image.png" style="width:55%;">
Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero
nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. </body>
</html>Выход
Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.
Praesent convallis urna a lacus interdum ut hendrerit risus congue.
Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac.
In at libero sed nunc venenatis imperdiet sed ornare turpis.
Donec vitae dui eget tellus gravida venenatis.
Целочисленный fringilla congue eros non fermentum.
Sed dapibus pulvinar nibh tempor porta.
Cras ac leo purus.
Mauris quis diam velit.
Lorem ipsum dolor sit amet, conctetur 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.
Fusce luctus vestibulum augue ut aliquet.
CSS Float Очистить свойство
clear
Свойство указывает стороны ,
где другие плавающие элементы не разрешается плавать.
CSS Float
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS clear property </title>
<meta charset="UTF-8">
<style type="text/css">
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
div {
width: 500px;
background: pink;
border: 1px solid #000000;
}
div p {
width: 150px;
margin: 10px;
padding: 50px 0;
text-align: center;
}
p.blue {
float: left;
background: blue;
}
p.seagreen {
float: right;
background: seagreen;
}
</style>
</head>
<body>
<div class="clearfix">
<p class="blue">Float Left</p>
<p class="seagreen">Float Right</p>
</div>
</body>
</html>Выход
Плыть налево
Плавать вправо