Открыть меню    

Свойство 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 */
           }
 

Комментарии к статье

Добавить комментарий