Rambler's Top100

СВОЙСТВО FLOAT В CSS

Свойство float позволяет перемещать элементы на странице в левую или правую стороны, такие элементы ещё называют плавающими, почему плавающими? Потому что по умолчанию все браузеры располагают элементы страницы сверху вниз,то есть один под другим

Свойство float имеет три значения:

left - элемент будет расположен слева, а другой элемент будет обтекать его с правой стороны

right - Элемент будет расположен справа, следующие элементы будут обтекать его слева

none - Значение по умолчанию, элемент не будет перемещаться

Применяется свойство float при создании блоков в размётке каркаса сайта, при размещении на странице картинок, рекламных блоков и других всевозможных элементов. Например нам нужно сделать три колонки на странице, для каждого блока колонки нужно обязательно указывть ширину блока (width). В файле CSS пропишем свойства для каждого из этих блоков

.blok1{ background-color:#E9967A;
width:120px;
height:80px;
float: left;
}
.blok2{
background-color:#F0E68C;
width:340px;
height:80px;
float: left;
}
.blok3{
background-color:#FFC0CB;
width:120px;
height:80px;
float: left;
}

В HTML-файле пишем следующий код:

<div class="blok1">блок -1</div>
<div class="blok2">блок - 2</div>
<div class="blok3">блок - 3</div>

В итоге получилось вот такое расположение блоков

блок -1
блок - 2
блок - 3

 

Если в файле CSS указать свойство float: left;, то первый и третий блоки поменяются местами, то есть первый блок будет располагаться справа, а следующий блок будет его обтекать слева. Если же вообще не указывать свойство float: left;, то блоки будут расположены друг под другом

Чтобы текст обтекал картинку слева или справа, тоже применяется свойство float, в файле CSS пишем свойства для картинки

.img{
float:left;

}

.img2{
float:right;

}

А в HTML файле пишем следующий код:

<img class="img2" src="../clipart/pictures/110.png" width="" height="">

Примеры расположения текста относительно картинок смотрите ниже

 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque egestas. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque egestas. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque egestas. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum.

 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque egestas. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque egestas. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque egestas. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum.

 

 

Rambler's Top100 Яндекс цитирования