Question

HTML：

<div id="float_left">
    DIV1
  </div>   
  <div id="without_overflow">
    DIV2 
  </div>

的CSS：

#float_left{
      float: left;
      width:200px;
      background-color: red; 
    }
    #without_overflow{
      width:400px;  
      height:40px;
      background-color:green;
    }

http://jsfiddle.net/kgypo14y/1

上述代码的结果是我的预期。但是，如果我添加overflow：auto或overflow：隐藏到第二个div，结果对我来说完全出乎意料。

http://jsfiddle.net/60nzadLz/2/

你对此有一个很好的解释吗？

谢谢

Answer 1

overflow的那些值导致元素建立新的块格式化上下文。 float可能永远不会侵入另一个块格式化上下文，因此整个元素将从float中移开。来自spec：

表格的边框，块级替换元素或正常流程中建立新block formatting context的元素（例如&& 39;溢出＆＃39;除＆之外的元素＃39; visible＆＃39;）不得与元素本身在同一块格式化上下文中的任何浮点数的边距框重叠。如果有必要，实现应该通过将所述元素放在任何前面的浮点数下面来清除所述元素，但如果有足够的空间，可以将它放在这些浮点数附近。

非常奇怪的溢出+浮动行为

1 个答案: