Плавающий объект

Плавающий объект

HTML-код CSS-код
<html>
<head>
<title>Пример CSS</title>
</head>
<body>
<p class="obj">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<body>
</html> 		.obj {
width: 200px;
border: 1px solid gray;
}
Получилось следующее:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  В данном тексте все элементы расположены обособленно, т.е. по-порядку идут: первый абзац, второй абзац, третий абзац.
  Если нужно, чтобы оставшийся текст обтекал первый абзац, то задайте для первого абзаца свойство float. Это означает, что данный абзац будет не жестко закреплён, а плавающим.
  В свойстве float применяются следующие значения:
  • top - ставит объект сверху
  • right - ставит объект справа
  • bottom - ставит объект снизу
  • left - ставит объект слева
  Для задания по первому абзацу обтекания слева, расположите сам абзац справа (свойство float: right;)
HTML-код CSS-код
<html>
<head>
<title>Пример CSS</title>
</head>
<body>
<p class="obj">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<body>
</html> 		.obj {
float: right;
width: 200px;
border: 1px solid gray;
}
Получилось следующее:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.