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

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:hidden 添加到第二个 div，结果对我来说是完全出乎意料的。

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

你对此有什么好的解释吗？

谢谢

Answer 1

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

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space.

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

Very strange overflow+float behavior

css

css-float