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

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.

Создание отступов

Управление списками

Реклама в разделе: