html - 为什么文本出现在它的容器外面？

Question

HTML

<div id="div1"></div>
<div id="div2">Outside div</div>

CSS

div{
   width   : 100px;
   height  : 100px;
}
#div1{
   background-color  : lightblue;
   float             : left;
}
#div2{
    background-color : blue; 
}

我有两个 <div>具有固定大小。一个是 float:left而另一个不是。两者 <div>的显示在同一位置。但是第二个里面的文字<div>出现在它的外面 <div>容器。为什么？

如果我输入 overflow:auto在 #div2第二个<div>出现在第一个旁边的不同位置。我不明白这里发生了什么。

http://jsfiddle.net/c86LS/

Answer 1

在第一种情况下，div1 和 div2 覆盖相同的空间。带有文本的行框必须避免 float ，因此由于 div2 上的溢出是默认的“可见”，因此文本流继续，就好像 div2 框比它高，显示在框下方。

在第二种情况下，将 div2 overflow 设置为“auto”会导致 div2 形成一个新的 block 格式化上下文。这意味着它不是在与 div1 相同的位置开始，而是在它旁边开始，因此您可以看到整个 div1 和 div2。