div не перемещается по предыдущему div со свойством float, установленным влево

Question

Какие правила CSS объясняют следующее sceanrio:

Предполагается, что у меня есть следующие фрагменты HTML CSS

HTML:

<div id="main">
   <div id="first">
       first div float left
   </div>
   <div id="second">
       second div does not have a float property set 
       and appears in a new line instead of next to 
       the first div
   </div>
</div>

CSS:

#first
  float: left

Что меня интересует, так это то, почему второй div плавает рядом с первым div, только когда его ширина установлена.Если я заменю второй div на абзац, он также будет плавать рядом с первым div.Так почему же второй div только располагается рядом с первым, когда его ширина установлена ​​или его собственное свойство float установлено как float left?

Кстати.Я не пытаюсь достичь какого-либо макета здесь.Я просто пытаюсь понять эти особенности поведения элемента div и других элементов блока.

РЕДАКТИРОВАТЬ:

ОК.Прежде всего, спасибо за ответы.Проблема, с которой я столкнулся, была основана на том факте, что я установил ширину первого и второго div на одно и то же значение, чтобы содержимое второго не могло плавать вокруг первого.Подводя итог, я думаю, важно знать, что элементы с установленным свойством float взяты из потока страниц и не занимают места.Во-вторых, следует помнить, что только содержимое может обтекать, а не фактический div.

Answer 1

A <div> - это элемент уровня блока, ширина которого составляет 100% и имеет разрыв строки до и после, когда он находится в пределах нормального потока содержимого.

Технически, когда вы перемещаете <div>, выВы удаляете элемент из нормального потока, чтобы у него больше не было переноса строки до и после, а также вокруг него обтекалось содержимое другой страницы.

Так почему второй элемент div только помещается следующимк первому, когда его ширина установлена ​​или его собственное свойство float установлено как float left?

Floated <div> всегда будут появляться рядом, только если есть достаточно места для размещенияих бок о бок.В противном случае следующий всплывший <div> будет перенесен на новую строку.Это связано с тем, что плавающие <div> находятся вне потока контента и определены так, как они ведут себя в спецификации .

Однако в своем вопросе вы сделали неверные предположения о том, чтопроисходит, когда вы устанавливаете ширину второго (не плавающего) <div>.

самого второго <div> всегда ниже (то есть позади ) плавающего <div>,Принимая во внимание, что «содержание» второго <div> всегда обтекает всплывающее <div>.(см. три примера ниже)

Таким образом, независимо от того, установлена ​​ли ширина второй div, ее содержимое будет по-прежнему течь вокруг с плавающей точкой div, как вы можете видеть на рисунке.здесь в трех примерах.(В целях иллюстрации первый <div> красный с непрозрачностью 50%, а второй синий с толстой зеленой рамкой.)

• Скрипка со вторым делителем шире первого

• Скрипка без заданной ширины (100%) на втором делении

• Скрипка свторой div уже первого

Как видно из всех трех приведенных выше примеров, несмотря на существование всплывающего первого <div> ...

• второй <div> всегда начинается с левого края экрана, несмотря на ширину второго <div>.

• второй <div> всегда начинается сверхний край экрана, потому что нет другого содержимого потока страниц выше второго <div>.

• фактическое содержимое второго <div> обтекает (справа) плавающеесначала <div> только там, где внутри контейнера достаточно места, чтобы он мог обтекать плавающий <div>.В противном случае, it выглядит , как будто он начинает новую строку, где действительно только его содержимое продолжает течь вокруг нижней части всплывающего <div>.

W3C Spec: 9 Модель визуального форматирования, 9,5 Float

Float - это поле, смещенное влево или вправо на текущей строке.Наиболее интересной характеристикой float (или «плавающего» или «плавающего» бокса) является то, что контент может течь вдоль его стороны (или запрещаться делать это с помощью свойства 'clear').Содержимое стекает вниз по правой стороне всплывающего окна и по левой стороне всплывающего окна.Ниже приведено введение в позиционирование поплавка и поток контента;точные правила, регулирующие поведение float, приведены в описании свойства 'float'.

Плавающее поле смещается влево или вправо, пока его внешний край не коснется края содержащего блока или внешнего края другого объекта с плавающей точкой.,Если имеется линейный блок, внешняя верхняя часть всплывающего блока выравнивается с верхней частью текущего линейного блока.

Если горизонтального пространства для поплавка недостаточно, он смещается вниз до тех пор, пока он не уместитсяили больше нет поплавков.

Поскольку поплавок не находится в потоке, непозиционированные блоки блоков, созданные до и после блока поплавка, текут вертикально, как если бы поплавок не существовал.Однако текущие и последующие линейные блоки, созданные рядом с поплавком, сокращаются по мере необходимости, чтобы освободить место для поля полей поплавка.

А вот целый ряд примеров ...

W3C Spec: 9 Модель визуального форматирования, 9.8 Сравнение нормального потока, поплавков и абсолютного позиционирования

Answer 2

Что заставляет вас верить, что дивы плавают рядом друг с другом? На самом деле это не так. Просто их содержимое отображается рядом друг с другом, но это не потому, что DIV #second находится слева от всплывающего DIV. Неважно, если вы установите ширину или нет.

На самом деле происходит то, что всплывающее DIV #first всплывает влево. Потому что он плавающий, он выводится из нормального потока. Это означает, что DIV #second фактически находится в том же месте, где появляется DIV #first. Содержимое DIV #second - это встроенное содержимое, а встроенное содержимое всегда обтекает плавающие элементы. Даже плавающие элементы, которые находятся вне контейнера. Таким образом, DIV #second находится под DIV #first, но содержимое DIV #second перемещается вокруг DIV # first.

Чтобы проиллюстрировать это, я создал этот CSS:

#first { float: left; background-color: rgba(255,0,0,0.3); }
#second { background-color: rgba(0,255,0,1); }

Поиграйте с альфа-значением значения RGBA () (т.е. последний параметр, он может варьироваться от 0 до 1) цвета фона DIV #first, и вы увидите, что DIV #second фактически ниже DIV # во-первых все время

Answer 3

Блочные элементы занимают 100% ширины их родительского элемента, поэтому даже если ваш первый div является плавающим, второй div будет принимать ширину его родительского элемента, таким образом, попадая на вторую строку. Вот почему, если вы укажете меньшую ширину, она будет стоять рядом с первым плавающим div.

Причина, по которой это также работает, если вы перемещаете два элемента div, заключается в том, что перемещаемый элемент ведет себя немного больше как элементы inline-block, что означает, что они будут занимать только пространство, необходимое для содержимого внутри них.

Суть в том, что если вы хотите, чтобы эти два элемента делились рядом друг с другом, вам, вероятно, следует просто слить их два.

Answer 4

Если вы не очистите свои поплавки, следующий элемент уровня блока будет плавать рядом с последним поплавком по умолчанию.

Я не уверен, чего вы здесь добиваетесь, но если вы хотите, чтобы #first плавало, а #second НЕ плавало, правило, которое вы хотите добавить к #firstis: clear:both

Но это довольно глупо, вы можете просто полностью удалить свойства float, если хотите сложить их.