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

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

Если какой-то элемент убрать из нормального потока (отображения), то его визуальное положение может быть другим, нежели при первоначальном положении. Этот момент в CSS регулируют 2 правила: float и position. Оба правила могут вырвать элемент из нормального потока.

Рассмотрим пример float (по умолчанию он во всех элементах стоит в значении «none»):

float:left; - элемент слева
float:right; - элемент справа

При этом блочные элементы совсем не учитывают правило float (располагаются также за ним), а строчные элементы — учитывают (обтекают плавающий элемент слева или справа). При применении правила float всегда нарушается поток, и взаимоотношения элементов меняются.

Когда элемент получает значение float:left|right; то у него display превращается в блочный. Если до этого у него был display:inline-table, то становится display:table, во всех других случаях — display:block.

Размеры плавающий элемент определяет по своему контенту. Если внутри есть текст | картинка, то он увеличивается соразмерно им (описанные правила ширины width и высоты height не работают). Если все содержимое элемента убрать, то он «сожмется».

Элемент, у которого есть правило float, не участвует по вертикали в схеме margin-collapse. Т.е. он никому свои margin не передает, ему свои margin (внутри) тоже никто не передает. В итоге: никаких margin-collapse для плавающих элементов нет.

А как плавающие элементы реагируют между собой?

Рассмотрим пример:

<style type="text/css">
.left{
   height:200px; width:200px;
   background:#ccf;
   margin:0 10px 10px 0;
   float:left;}
</style>
<div class="left">1</div>
<div class="left">2</div>
<div class="left">3</div>
<div class="left">4</div>
<div class="left">5</div>

Есть несколько элементов div, для каждого определен одинаковый стиль с правилом float. В итоге элементы выстроятся друг за другом. Рассмотрим механизм работы: вначале встает элемент №1, у него есть свои расчетные координаты, чтобы разместиться. Все плавающие элементы с float встают максимально высоко и левее|правее в зависимости от своего значения. Границей для размещения таких элементов являются:

  • Границы контейнера, в котором данные элементы находятся (контейнер для них по-прежнему является родительской областью контента).
  • Области, предоставленные другими элементами. Т.е. если у меня стоял бы перед ним какой-то блок (например, параграф), то пространство для расположения плавающий элемент будет брать по нижней границе margin-box у предыдущего блочного элемента. Т.е. раз плавающий элемент ни с кем не участвует в margin-collapse, то margin он всегда будет учитывать.

Элемент №2 встал максимально высоко (верхнюю границу margin-box выровнял с верхней границей контейнера) и левую границу margin выровнял с правой margin предыдущего плавающего элемента. И так будет происходить с другими элементами, пока хватает места наверху.

Далее следующие плавающие элементы встают по нижней границе margin-box предыдущего плавающего элемента. Т.е. в следующей строке.

Выпадение плавающих элементов из своих родительских контейнеров

Рассмотрим пример:

<style type="text/css">
#left{
   background:#ccf;
   height:200px; width:200px;
   float:left;}
#out{
   background:#cfc;
   padding:30px;}
</style>
<div id="out">
   <div id="left"></div>
</div>

Определили стили для двух элементов, один из которых плавающий. При этом один элемент находится внутри другого. Но т.к. все элементы с display:block плавающие элементы не учитывают, то он будто провалился.

Как сделать, чтобы производился бы учет внешним элементом внутреннего плавающего? Для этого есть правило clear (по умолчанию у всех элементов в значении «none»). Возможны 3 значения:

  • left — учитывать все плавающие элементы в левую сторону.
  • right — учитывать все плавающие элементы в правую сторону.
  • both — учитывать с обеих сторон.



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

Ваш e-mail не будет опубликован.