Float: левый абзац, за которым следует float: none paragraph

Я пытаюсь понять поведение float, поэтому я написал простые два абзаца ниже.

Второй абзац, который является float: none, кажется, "содержит/окружает" первый абзац, который является float: left.

Кто-нибудь, пожалуйста, помогите мне понять, почему это.

<p style="float:left; border:red solid 1px;">
  first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph.
</p>

<p style="float:none; border:green solid 1px;">
  second paragraph. second paragraph. second paragraph. second paragraph. second paragraph. second paragraph. second paragraph. second paragraph. second paragraph.</p>

Ответ 1

Первый абзац извлечен из потока путем плавания, а второй абзац остается в потоке, поэтому поле второго абзаца позиционируется так, как будто первого абзаца не было.

Однако текст во втором абзаце сбрасывается первым абзацем, чтобы он оставался видимым. Техническая причина этого заключается в том, что текст является встроенным контентом, который протекает вдоль набора строк. Из spec:

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

[...]

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

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

Как упоминалось в других ответах, это поведение обычно предотвращается, очищая float:

<p style="float:left; border:red solid 1px;">
  first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph.
</p>

<p style="clear:both; float:none; border:green solid 1px;">
  second paragraph. second paragraph. second paragraph. second paragraph. second paragraph. second paragraph. second paragraph. second paragraph. second paragraph.</p>

Ответ 2

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

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

Эта информация была взята из здесь, что поможет лучше объяснить float.

Ответ 3

Элементы после плавающего элемента будут обтекать его. Элементы перед плавающим элементом не будут затронуты.

Если вы хотите снова сделать поток HTML нормальным, вам необходимо его очистить: css-clear