Урок 22. Обтекание элементов web-страницы в 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> и, поэтому попадают под стилевые описания селектора div.flowers_2 img.

Дата публикации: Октябрь 2009 | Обновление: Май 2012

Урок 21. CSS изображение CSS обтекание Урок 23. CSS позиционирование

Сохранить в сервисы и закладки