Четверг, 10 Мая 2012 15:04

Верстка сайта. Урок 7. Плавающие элементы float

Written by 
Оцени эту запись
(3 Голоса)

В этом уроке рассмотрим свойство float. Элементы, которым задано свойство float называются плавающими. 

 

Свойство float часто применяется при работе с картинками для выстраивания их в ряд, а также при верстка макетов HTML страниц для создания колонок. Кроме того, при помощи свойства float создается горизонтальное меню, где это свойство применяется к элементам списка с пунктами меню. Также свойство float широко используется при верстке контента страницы для задания обтекания картинок и других блочных элементов текстом. Заданием значения свойства float вы указываете с какой стороны данный элемент должны обтекать следующие за ним элементы. Элементы идущие перед плавающим на реагируют на данное свойство.

 

Плавающие элементы float

Возможные значения float:

 

  • rigth - задает обтекание справа
  • left - задает обтекание слева
  • none - отменяет обтекание

 

Значение по умолчанию - none.

 

Применение свойства

 

Блочные элементы после себя переводят строку.

 

<div style="width: 100px; height: 100px; background: red;"></div>Текст после блока

 

 

 

Текст после блока

 

А теперь применяем свойство float со значение left и видим, что текст отобразился сбоку. То есть, свойством float мы задали нашего блоку обтекание.

 

<div style="width: 100px; height: 100px; background: red; float: left"></div>Текст после блока

 

 

 

Текст после блока float: left

 

 

 

Аналогично, задав float: right блоку, текст, идущий после него, будет отображаться сбоку. Только в данном случае блок будет справа, а текст слева.

 

<div style="width: 100px; height: 100px; background: red; float: right"></div>Текст после блока

 

 

 

Текст после блока float: right

 

 

 

 

Примеры применения

 

Можно набор блоков с каким-то контентом поставить рядом.

 

<div style="width: 100px; height :100px; background: red; float:left; margin-right: 10px;">
<div style="width: 100px; height :100px; background: green; float:left; margin-right: 10px;">
<div style="width: 100px; height :100px; background: blue; float:left; margin-right: 10px;">
<div style="width: 100px; height :100px; background: yellow; float:left; margin-right: 10px;">

 

 
 
 
 
 
Если вместо float: left поставить float: right, блоки поменяются местами:

 

 

 
 
 
 
 
 

Если вам нужно сделать некоторые блоки обтекаемыми, чтобы какие-то блоки или текст отображались сбоку, но отменить это свойство для всех остальных элементов, используйте свойство clear. У свойства clear могут быть значения left, right, both, none;

 

 

 
 
 
 
 

 

<div style="width: 100px; height :100px; background: red; float:left; margin-right: 10px;">
&nbsp;</div>
<div style="width: 100px; height :100px; background: green; float:left; margin-right: 10px;">
&nbsp;</div>
<div style="width: 100px; height :100px; background: blue; float:left; margin-right: 10px;">
&nbsp;</div>
<div style="width: 100px; height :100px; background: yellow; float:left; margin-right: 10px; clear:left;">
&nbsp;</div>
 
 
 
У желтого блока добавлено свойство clear:left, потому он отображается не рядом с синим, а под ним.
 
 
Свойство float широко используется в блочной верстке, где с помощью этого свойства делаются колонки шаблона сайта. Подробнее о блочной верстке можно прочитать в статье Плюсы и минусы табличной и блочной верстки
 
 
 

Примечания

 
1. Если за плавающим элементом стоит еще один плавающий с тем же направлением, то второй выровняется по границе первого. Если они оба float:left, то втором расположится левым краем рядом с правым краем первого. 
 
 
2. Элемент, на который действует обтекание слева не может выйти за левую границу родительского блока. Аналогичное утверждение работает и для обтекания справа. Для примеры приведу 4 блока с float:left, которые используются выше и самому левому задам свойство margin-left: -200px:
 
 
 
 
 
 
 
 
 
Как видите, первый блок ушел за пределы страницы, но следующий за ним остановился на левой границе страницы.
 
 
 
3. Правый край блока, на который действует float со значением left не может быть справа от левого края любого блока, на который действует float: right.
 
Если блоков float:left и float: right достаточно много, они не будут налезать друг на друга, а перейдут в новую строку.
 
 
4. Применение свойства float к строчному элементу делает его блочным.
 
 
Для примера рассмотрим строку, в котором одно слово будет выделено жирным при помощи тега <strong>. Тег <strong> является строчным.
 
 
 
Заголовки в HTML делаются при помощи тегов h1-h6
 
А теперь элементу <strong> в этой строке добавим свойство float:
 
 
Заголовки в HTML делаются при помощи тегов h1-h6
 
 
Элемент стал обтекаемым и блочным. Для точности проверки посмотрим значение Computed Style:
 
 
c float:
display: block;
width: 39px;
 
без float:
display: inline;
width: auto;
 
 
5. Если у элемента стоит свойство display со значением "none", то свойства float и position к нему не применяются.
 
 
6. Если у элемента свойство position со значениями absolute или fixed, то значение свойства float устанавливается как "none".
 
 
7. Ширина плавающего блока зависит от его содержимого, если ее не установить. По умолчанию ширина блочного элемента равна 100% ширины родительского элемента. Но если блочному элементу поставить свойство float со значение отличным от "none", то его ширина будет равна ширине дочерних элементов:
 
 
 
 
 
 
 
 
 

Свойство clear

 
 
Свойство clear убирает обтекание плавающих блоков. Его нужно применять после плавающих блоков и перед тем блоком, на который float не должен действовать.
 
 
Значения свойства clear:
 
 
  • left - убирает обтекание слева
  • right - убирает обтекание справа
  • both - убирает обтекание слева и справа
  • none - не убирает обтекание
 
Значение по умолчанию - none.
 
 
 
Если у вас есть блок, все дочерние элементы которого являются плавающими, то высота родительского блока будет равно 0. Чтобы сделать высоту родительского блока равной высоте самого большого блока из дочерних, нужно после плавающих блоков добавить элемент, очищающий поток.
 
 
<div style="background: violet;">
<div style="width: 100px; height :100px; background: red; float:left; margin-right: 10px;">&nbsp;</div>
<div style="width: 100px; height :100px; background: green; float:left; margin-right: 10px;">&nbsp;</div>
<div style="width: 100px; height :100px; background: blue; float:left; margin-right: 10px;">&nbsp;</div>
</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Здесь фиолетового цвета(фон родителя) даже не видно. Добавим внутрь родителя еще один элемент со свойством clear: left.
 
 
<div style="background: violet;">
<div style="width: 100px; height :50px; background: red; float:left; margin-right: 10px;">&nbsp;</div>
<div style="width: 100px; height :100px; background: green; float:left; margin-right: 10px;">&nbsp;</div>
<div style="width: 100px; height :20px; background: blue; float:left; margin-right: 10px;">&nbsp;</div>
<div style="clear:left">&nbsp;</div>
</div>
 
 
И, кроме этого, мы изменили высоту дочерних элементов.
 
 
 
 
 
 
 
 
 
 
Теперь видно, что высота родительского элемента растянулась на высоту дочерних.
 
 
Если нужно обойтись без добавления лишнего элемента в поток, нужного только для очищения потока, можно воспользоваться псевдоэлементами before или after:
 
 
 
div.pseudo:after{
content: '';
display: block;
clear: left;
}
 
<div style="background: violet;" class="pseudo">
<div style="width: 100px; height :50px; background: red; float:left; margin-right: 10px;">&nbsp;</div>
<div style="width: 100px; height :100px; background: green; float:left; margin-right: 10px;">&nbsp;</div>
<div style="width: 100px; height :20px; background: blue; float:left; margin-right: 10px;">&nbsp;</div>
</div>
 
 
 
 
 
 
 
Таким образом мы очищаем поток при помощи CSS и не добавляем лишние элементы.
 
 
 
 
 
 
 
 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов