Свойство CSS Float. Плавающие элементы. Преодолеваем проблемы.

Свойство float

Свойство float перемещает любой элемент в нужное место, выравнивая его по левому или правому краю веб-страницы (или блока). Такие элементы называются плавающими (или перемещаемыми).

В качестве значения свойства float указывают:

Left

– перемещаем элемент влево, содержимое, находящееся ниже, обтекает правый край элементы

Right

– перемещает элемент вправо

None

– отменяет перемещение

CSS

.left_sidebar{float: left;}

Важно помнить, что плавающие элементы удаляются из обычного потока. Остальные элементы не видят плавающих элементов: ведут себя так, как будто их и нет. Однако, строчные элементы (контент) будут смещаться, создавая эффект обтекания.

Проблемы и пути их преодоления

Как правило, когда сталкиваешься с плавающими элементами, возникают одни и те же проблемы.

Как вы знаете, любой текст обтекает плавающие блоки. Но что если нам не нужно обтекание. Взгляните на изображение – нижний блок (.footer) обтекает плавающий блок и оказывается прямо под контентом. Это совершенно неприемлемо, так как .footer должен находиться ниже остального содержимого.

Чтобы отменить обтекание, необходимо блоку .footer добавить свойство clear со значением both (отменяет обтекание с левой и с правой стороны).

CSS

.footer {clear: both;}

Как результат:

Или вот еще: если расположить плавающий элемент в неперемещаемом блоке div, то плавающий блок может легко выйти за пределы неперемещаемого блока.

Взгляните на изображение – оба плавающих блока расположены в блоке .wrapper (темно-синий), однако вместо того чтобы расширить неперемещаемый блок, плавающие блоки (светло-голубые) оказываются за пределами блока .wrapper.

Предотвращаем выход плавающих блоков за пределы элемента-родителя

Чтобы расширить обертывающий блок и соответственно сделать так, чтобы плавающие элементы не выпадали из этого блока, необходимо добавить в обертывающий блок в качестве последнего блока разрыв строки <br>, горизонтальную линию <hr> или блок <div>. Затем к этому элементу нужно прицепить свойство clear со значением both, чтобы закрепить добавленный тег под плавающими элементами.

CSS

<div style="float:left"></div>
<div style="float:right"></div>
<div style="clear:both"></div>

Очищающий (clearfix) метод

Необходимо добавить несколько стилей блоку, который содержит плавающие элементы. В результате плавающие блоки не выйдут за пределы охватывающего блока .wrapper.

CSS

.wrapper:after
{
 visibility: hidden; 
 display: block;
 font-size: 0;  
 content: " ";
 clear: both;  
 height: 0;
}
* html .wrapper             { zoom: 1; } /* IE6 */
*:first-child+html .wrapper { zoom: 1; } /* IE7 */

Элемент-контейнер плавающий

Также, чтобы предотвратить выпадение плавающих элементов за пределы элемента-родителя, можно сам элемент-родитель сделать плавающим. В результате наш элемент-родитель расширится нужным образом и правильно вместит в себя другие плавающие элементы. Однако, не забудьте назначить свойство clear:both элементу, который следует за охватывающим плавающим элементом.

CSS

<div style="float:left">         
<div style="float:left">
</div>
<div style="float:right">
</div>
<div style="">
</div>
</div>

Overflow:hidden

Чтобы расширить элемент-контейнер и заставить его содержать плавающие элементы, можно добавить следующие свойства элементу-контейнеру:

CSS

           .wrapper 
           {
           overflow:hidden;
           zoom: 1;  /* IE6 */
           }