float：左段后跟float：none段

Question

我试图了解浮动行为，所以我在下面写了简单的两段。

第二段是float：none，似乎“包含/包围”第一段浮点数：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浮动，而第二段保留在流程中，所以第二段的方框定位好像第一段不在那里。

但是，第二段中的文本会被第一段推下，以便它仍然可见。技术原因是文本是内联内容，它沿着一组线框流动。来自spec：

  

由于浮动不在流中，因此在浮动框之前和之后创建的非定位块框垂直流动，就像浮动不存在一样。但是，根据需要缩短浮动旁边创建的当前和后续行框，以便为浮动的边距框留出空间。

     

[...]

     

如果缩短的行框太小而无法包含任何内容，则行框向下移动（并重新计算其宽度），直到某些内容适合或不再存在浮动。

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

正如其他答案中所提到的，通常通过清除浮动来阻止此行为：

<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>

Answer 2

就像名字暗示一个元素浮动一样，所以你必须清除元素，以便它们以你想要的顺序出现。

在其上设置了clear属性的元素不会像浮点数那样向浮点附近向上移动，而是会自己向下移动经过浮点数。再说一次插图可能比单词更好。

此信息来自here，这将有助于更好地解释浮点数。

Answer 3

浮动元素之后的元素将围绕它流动。 浮动元素之前的元素不会受到影响。

如果要再次使HTML流正常，则需要清除它： css-clear