overflow：hidden的問題？

01-04

& & & &無標題文檔& & & && && & &

這段代碼相信大家都能看得懂。之後我再第二個div裡面加入了overflow:hidden屬性。就成了下面這樣了，為什麼？
& & & &無標題文檔& & & && && & &

我知道overflow:hidden是父級元素用來清除浮動的，使得視覺上面沒有浮動的父級元素自動擴大，包含浮動的子元素。但是我現在沒有編寫父級元素，而是兩個同級元素div，並且在第二個div上設置了overflow:hidden屬性。為什麼第二個div就逃離了第一個浮動div的覆蓋範圍，並且緊緊貼著第一個浮動div。就彷彿第二個div也設置了float:left屬性一樣。按理說它倆的位置不會有什麼變化才對啊？因為overflow：hidden是給父級元素清除浮動的，但現在是應用在了同級元素上，不是父級元素。原理是什麼，請高人回答。

Visual formatting model

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.

大概意思就是說，overflow: hidden 元素會建立 BFC（塊級格式化上下文），在這種情況下，如果它自身所在的 BFC 有浮動的元素，它不可與這些元素交疊。對於瀏覽器實現，有必要時需要對其清除浮動（即把它放在浮動元素的下方）；而如果浮動元素的相鄰位置有足夠的空間，則可以把它放在這裡。題主問題的情況應該就是後面一種情況。