Как float относится к абсолютному и относительному позиционированию div?

Ранее я задавал вопрос об абсолютном и относительном позиционировании div, но я хотел бы попытаться понять (наверняка) роль float в этом контексте.

Мой главный вопрос: как float соотносится с absolute и relative div позиционированием?

Верны ли следующие утверждения (да/нет):

  1. float right (или left) попытается сложить все div один за другим, начиная с right (или left). Если места недостаточно (проблема width), div отображаются на следующей «строке» (сверху вниз).
  2. float никогда не влияет на absolute div, absolute имеет приоритет над float
  3. relative div располагаются относительно первого окружающего relative div (absolute div игнорируются)
  4. float right (или left) на div сначала вычислит естественное положение relative div, а затем добавит любое смещение влево вверх, чтобы вычислить окончательное положение.

Спасибо.


person Jérôme Verstrynge    schedule 03.05.2012    source источник


Ответы (3)


http://www.barelyfitz.com/screencast/html-training/css/positioning/ 7,8 и 9

С помощью CSS float элемент можно сдвинуть влево или вправо, позволяя другим элементам обтекать его.

Предоставленные вами утверждения «кажутся» правильными

person Hitham S. AlQadheeb    schedule 03.05.2012
comment
Что ж, утверждение 3 неверно... относительное позиционирование не зависит от того, является ли вложение относительным или нет. - person Jérôme Verstrynge; 28.05.2012

Плавающие влево или вправо будут располагаться рядом друг с другом в строке, если ширина не равна 100%, тогда они будут располагаться друг под другом:

введите здесь описание изображения

Надеюсь, это имеет смысл и это то, что вы ищете.

person Wesley    schedule 03.05.2012

Абсолютно позиционированное деление имеет отношение только к первому элементу-предку, позиция которого не статична, и именно так он определяет, где он заканчивается, через свойства top, right, bottom, left. Абсолютно позиционированный элемент не может быть плавающим, потому что он был удален из потока документа.

Я смущен вашим пунктом № 3, который не имеет особого смысла. Относительное деление будет отображать деление так, как оно обычно отображается в документе. Затем его можно перемещать с его свойствами top, left, bottom, right, сохраняя ту же позицию, которую он использовал бы, если бы никуда не перемещался. Относительно позиционированный элемент может быть плавающим, как и любой обычный элемент, и это не повлияет на то, где другие плавающие элементы заканчиваются, когда вы его перемещаете.

person animuson    schedule 03.05.2012