为什么div包含在sister-div中？

Question

我不明白为什么http://jsfiddle.net/zHH4D/的小提琴 在红色区域和右侧之外没有显示“向右”， 但在红色区域内？！

我可以将div放在父div之外和这种作品中，但这对我来说没有意义。

我认为哪里错了？

Answer 1

你有一个错字：

<div style="width:340px;float:left;background-color:#f00;">
    <div>above ok</<div> <!-- TYPO -->
    <div>under ok</div>
</div>

这会导致浏览器尽可能地解释您的标记，从而产生此标记（从Chrome检查器复制）：

<div style="width:340px;float:left;background-color:#f00;">
    <div>above ok<!--<div-->
    <div>under ok</div>
</div>
  <div style="float:left;">
    to the right?
  </div>
</div>

这是fixed version：

<div style="width:340px;float:left;background-color:#f00;">
    <div>above ok</div> <!-- Notice the closing div tag -->
    <div>under ok</div>
</div>