css - 为什么 div 包含在姐妹 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>

这是一个固定版本：

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