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>