#Урок 10. Плавающие элементы

И так. Давайте сначала разберемся, что же такое Плавающие элементы? Это — обтекаемые элементы. К примеру вам нужно вставить изображение написать текст так, чтобы он обтекал эту картинку. Для этого используется свойство — float.

float — свойство, отвечающее за расположение элемента и обтекание его другими элементами (текстом или картинками и т.п.) слева и справа.

left — элемент прижат к левому краю, а остальные элементы обтекают его с права.
right — элемент прижат к правому краю, а остальные элементы обтекают его с лева.

clear — убирает обтекание с определенной или же со всех сторон.

принимает следующие значения:

left — отменить обтекание слева

right — отменить обтекание справа

both — отменить обтекание со всех сторон

Как это выглядит в CSS:

 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Урок 10</title>
 
<style>
.left {
  float: left;
}
.right {
  float: right;
}<br >
.clear {
  clear: both;
}
</style>
  
</head>

<body>

    <div class="left">Текст в левом блоке. Можете вставить свой текст... Любой...</div><
    
    <div class="clear"></div>
    
    <div class="right">А это Правый блок. Данный блок расположен ниже первого, так как мы использовали свойство clear: both</div>
  
</body>
</html>

Скопируйте себе этот код в блокнот, сохраните в формате html откройте с помощью браузера и попробуйте изменять размер окна браузера.

На этом 10 урок окончен!

Комментарии закрыты.