html - float :left paragraph followed by float:none paragraph

Question

我试图理解 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>

Answer 1

第一段是taken out of the flow通过 float ，而第二段仍处于流动状态，因此第二段的框位置就像第一段不存在一样。

但是，第二段中的文本被第一段压低了，因此它仍然可见。这样做的技术原因是文本是内联内容，沿着一组行框流动。来自spec :

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

[...]

If a shortened line box is too small to contain any content, then the line box is shifted downward (and its width recomputed) until either some content fits or there are no more floats present.

由于文本被下推，这导致第二个段落框的边界也向下延伸，以适应文本的新位置。

如其他答案中所述，通常通过清除 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>