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

HTML:

上面代码的结果是我所期望的。但是，如果我在第二个div中添加了overflow:auto或overflow:hidden，结果完全出乎我的意料

你对此有很好的解释吗

---

谢谢

溢出的那些值会导致元素建立新的块格式上下文。浮点可能永远不会侵入另一个块格式上下文，因此整个元素都会从浮点中移开。从：

表的边框框、块级替换元素或正常流中建立新元素的元素（例如具有“溢出”而非“可见”的元素）不得与元素本身所在块格式上下文中任何浮动的边距框重叠。如有必要，实现应通过将所述元素放置在任何之前的浮动下方来清除所述元素，但如果有足够的空间，则可将其放置在此类浮动附近

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

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