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>会出现在第一个{{1}}旁边的不同位置。我不明白这里发生了什么。

http://jsfiddle.net/c86LS/

Answer 1

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

在第二种情况下，将div2溢出设置为＆＃34; auto＆＃34;导致div2形成一个新的块格式化上下文。这意味着它开始，而不是与div1在同一个地方，但在它旁边，所以你看到整个div1和div2。

Answer 2

使用overflow: hidden属性作为父div。

Answer 3

您没有为＃div1指定任何宽度。所以它占据了它的整个宽度。为#div1指定一些宽度，然后蓝色容器将使用剩余部分。

 #div1{
 background-color: lightblue;
 float: left;
 width:50px;
 }

Answer 4

因为你没有清除它。什么时候你浮动元素并且不能正确清除它会导致高度问题。前面的div没有采取完整的高度。

为什么文本出现在容器外面？

4 个答案: