Обтекание CSS блока и остальных объектов

CSS значения, определяющие обтекание блока на странице сайта

CSS атрибут float определяет обтекание одних объектов страницы другими.

Пример CSS обтекания с параметром float:left:

<title>CSS обтекание</title>

          <style type="text/css">

          div.flowers img {float:left; margin:26px; border:1px solid #000000}

          div.flowers a:hover img {margin:26px; border:1px solid #ffffff}

          </style>

          </head>

          <body>

          <div class="flowers">

          <a href="#"><img src="../images/bee.jpg" alt="" width="160" height="160"

          border="0" /></a>

          <a href="#"><img src="../images/flower4.jpg" alt="" width="160" height="160" border="0" /></a>

          <a href="#"><img src="../images/flower5.jpg" alt="" width="160" height="160" border="0" /></a>

          <a href="#"><img src="../images/flower.jpg" alt="" width="160" height="160"

          border="0" /></a>

          <a href="#"><img src="../images/flower3.jpg" alt="" width="160" height="160" border="0" /></a>

          <a href="#"><img src="../images/bee2.jpg" alt="" width="160" height="160"

          border="0" /></a>

          </div>

          <div style="clear:left"> &nbsp; </div>

          </body>

Как результат обтекания изображений, мы имеем галерею:

Атрибуты и значения

div.flowers img – определяет свойства изображения img в блоке <div class="flowers"> </div>.
float:left – определяет обтекание слева направо.
margin: – определяет отступ по всему периметру изображения.
border:1px solid #000000 – определяет свойства границы элемента.
<div style="clear:left"> </div> – останавливает обтекание с левой стороны, то есть обтекание не будет распространяться на данный блок и на следующие элементы.

Возьмем предыдущий код и немного изменим описания «останавливающего» div-а:

<div style="clear:left; background-color:DeepSkyBlue; width:160px; height:160px; border:1px solid #000000"> &nbsp; </div>

и откроем результат обтекания блока в новом окне.

Уберите параметр clear:left и вы вряд ли останетесь довольны таким обтеканием блока.

Пример CSS обтекания с параметром float:right:

<title>CSS обтекание</title>

          <style type="text/css">

          div.flowers_2 img {float:right; margin:26px; border:1px solid #000000}

          div.flowers_2 a:hover img {margin:26px; border:1px solid #ffffff}

          </style>

          </head>

          <body>

          <div class="flowers_2">

          <h1 align="center">Цветы</h1>

          <a href="#"><img src="../images/flower4.jpg" width="160" height="160" border="0" /> </a>

          <a href="#"><img src="../images/flower5.jpg" width="160" height="160" border="0" /> </a>

          <a href="#"><img src="../images/flower.jpg" width="160" height="160" border="0" /> </a>

          <a href="#"><img src="../images/flower3.jpg" width="160" height="160" border="0" /> </a>

          <h1 align="center" style="clear:both">Цветы и пчелы</h1>

          <a href="#"><img src="../images/bee.jpg" width="160" height="160" border="0" /> </a>

          <a href="#"><img src="../images/bee2.jpg" width="160" height="160" border="0" /> </a>

          </div>

          </body>

Результат: обтекание с правой стороны

Атрибуты и значения

clear:both – отменяет обтекание как слева, так и справа.
align="" – определяет горизонтальное выравнивание.

Изображения с пчелами расположены после блока, отменяющего обтекание с правой стороны, но они по-прежнему держатся правого края. Почему? Потому что данные изображения расположены внутри блока <div class="flowers_2"> </div> и, поэтому попадают под CSS свойства селектора div.flowers_2 img.

Автор проекта - Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

CSS изображение CSS обтекание изображения CSS позиции блока