CSS свойство float - httpdoc.ru

CSS Float

Свойство CSS float используется для позиционирования элемента на веб-странице. Он может перемещать элемент вправо, влево или может унаследовать свойство плавания родительского элемента.

Также есть clear свойство, которое используется для указания направления, в котором другие плавающие элементы не разрешены.

Синтаксис:
float: value;
ясно: значение;

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>

Выход

CSS Float

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>

Выход

CSS clear property

Плыть налево

Плавать вправо