Question

div#float的输出是意外的：

#absolute{
  width:300px;
  height:300px;
  border:1px solid black;
  position:absolute;
}
#float{
  width:400px;
  height:400px;
  border:1px solid red;
  float:left;
}

<div>
  <p>Title</p>
Hello World!
<div id="absolute"></div>
<div id="float"></div>
</div>

根据W3C anonymous-block-level，内联元素Hello World!周围应该有一个匿名块级框。（<div id="anonymous-block-box">Hello World!</div>）。我希望输出应该是：

#absolute{
  width:300px;
  height:300px;
  border:1px solid black;
  position:absolute;
}
#float{
  width:400px;
  height:400px;
  border:1px solid red;
  float:left;
}

<div>
  <p>Title</p>
<div id="anonymous-block-box">Hello World!</div>
<div id="absolute"></div>
<div id="float"></div>
</div>

Answer 1

您在上面链接的规范仅讨论blocks。如果您在谈论floats，那么您应该参考此link。

在这里你可以看到（由我高调）：

如果内嵌级框放置在行之前，在遇到左浮动之前符合剩余的行框空间，放置左浮动在该行上，与行框的顶部对齐，然后行上已有的内联级别框相应地移动到浮动的右侧

这解释了为什么inline元素显示在float元素的右侧。

Answer 2

inline element如果此空格包含空格，则自己进入空白区域，因此当您float:left div#float时，它会在其右侧留下一些空格，以便inline-element去这个地方。

如果你希望#float位于inine-element之下，你应该删除float：left，因此它将显示：block，在这种情况下，inline-element将不会在它旁边找到空白区域，所以它将是你的期望

＆＃13;

#absolute{
  width:300px;
  height:300px;
  border:1px solid black;
  position:absolute;
}
#float{
  width:400px;
  height:400px;
  border:1px solid red;
  //float:left;
}

＆＃13;

<div>
  <p>Title</p>
Hello World!
<div id="absolute"></div>
<div id="float"></div>
</div>

＆＃13;

匿名块级框和浮动

2 个答案: