1樓：hgm
2023年7月30日更新答案。
可以參考這個鏈結學習指定值，計算值，使用值。
我們知道div的height屬性，預設值是auto。這裡的auto是指定值，最終瀏覽器渲染的時候是需要具體的畫素值的。那就有乙個計算的過程。
正常來講div的高度是子元素的高度之和，並且浮動元素不佔據高度。
如果正常情況下div內部有浮動的元素，浮動的元素的高度是不會計入父元素的高度的。所以看起來div高度就是0了。也就是說這種情況下height: auto;的計算結果是0。
但是如果給div加上overflow: hidden;最終結果會不一樣，看起來是div的高度就是浮動元素的高度。這種現象讓題主比較迷惑，因為這和「浮動元素不參與父元素的高度」這條規則相矛盾。
實際上確實是矛盾的，但這也是瀏覽器的開發人員（或者是規範）的一種選擇。另外一種選擇就是像題主所說，應該表現為div的高度仍然為0。然後浮動元素不可見，相當於被剪下了。
至少這兩種選擇都滿足overflow: hidden;觸發了BFC的定義。（我理解的BFC是內外互相不干擾。
如果把浮動元素的高度計入BFC容器的高度這條規則也算做BFC本身的規則就另說了）
總結就是瀏覽器就是這麼選擇的，這麼實現的（height: auto;根據不同條件計算結果不一樣）。可能認為這種表現更有意義。
如果題主想要實現剪下的效果，可以手動指定height: 0;
-----以下為原答案-----
因為height: auto;的計算結果不是一定為0的。
正常父元素包含浮動子元素，父元素的高度確實為0。
但是父元素overflow:hidden;後，首先會計算height: auto;的真實高度，由於其觸發了BFC，需要包含子元素，所以高度不是0，而是子元素高度。
這時overflow:hidden;才起到隱藏作用，不過父元素高度足夠大，所以子元素沒有被隱藏。
總之，是先計算真實高度，再去隱藏。如果是先直接隱藏了，再去計算高度也就沒有意義了。
2樓：賀師俊
BFC 沒有什麼好說的，這只是機制，不解答題主的疑問。在 BFC 語境下，題主的問題其實就轉換為了為啥 overflow: hidden 就是 BFC。
要說一點歷史了。
實際上 CSS 1 是沒有 overflow 屬性的（float 屬性已經有了）。overflow（以及許多複雜的 layout 機制）是 CSS 2 加入的。而 CSS 2 以 bug 眾多，實現不一而著稱。
在原始的 CSS 2 中，overflow: hidden 時 float 的行為其實語焉不詳。如果你看一下 CSS 2.
1 的附錄C——變更/錯誤/澄清和後續修改，搜尋一下 overflow 關鍵字，會看到幾十處相關修訂。
注意 CSS 2.1 實際上很多地方是對既有瀏覽器的實現結果進行倒推的機制合理化。雖然我沒有拿老瀏覽器來測試，不過推斷 overflow 的行為應該也有許多地方是這樣來的。
站在今天審視 CSS ，也許使用乙個單獨的屬性來構建 BFC 也是一種可能性（這樣當未開啟 BFC 時，overflow: hidden 可以呈現你描述的效果），不過歷史選擇了一條類似 IE 之 hasLayout 屬性的道路——即由某些其他顯式的屬性觸發乙個隱式的超級屬性，該超級屬性可以決定其他屬性的實際意義。
最終的結果就是你看到的，overflow 取值只要不是 visible ，就會開啟這個超級屬性（BFC），此超級屬性反過來決定了 height: auto 是如何計算的（參考 @貘吃饃香的答案）。從 BFC 的機制設計來看，把 float 元素納入尺寸計算（即所謂父塊包裹子塊）是合理的。
至於你想要的效果，未來 clip-path 屬性（CSS Masking Module Level 1）將可提供。
3樓：舊城
因為overflow.hidden會觸發BFC。 BFC的意思是，我這個元素裡面的子孫元素，不會影響外部元素的布局。
但浮動本身會造成行內寬度的壓縮，出現文字環繞效果。如此一來，浮動元素越寬，當然行內的可容納的文字數就越少，文字的行數就會增加，文件流高度也就增加。這樣，就影響了其外部元素的布局。
所以從BFC的本意來說，必須給浮動元素撐出高度，使得後續的元素無法跟浮動元素共享同一水平位置，看上去就是 clear both 的效果了。
4樓：貘吃饃香
瀉藥不說BFC什麼的了
就「分析」下本意
overflow:hidden 的意思是超出的部分要裁切隱藏掉那麼如果 float 的元素不佔普通流位置普通流的包含塊要根據內容高度裁切隱藏
如果高度是預設值auto
那麼不計算其內浮動元素高度就裁切
就有可能會裁掉float
這是反布局常識的
所以如果沒有明確設定容器高情況下
它要計算內容全部高度才能確定在什麼位置hidden浮動的高度就要被計算進去
順帶達成了清理浮動的目標
同理overflow 非預設值
position 非預設值
float 非預設值
等都是遵循這個布局計算思路
隨便瞎扯閃
CSS 中，position absolute float display inline block 都能實現相同效果，區別是什麼？
深秋的黎明 禁言 以float為參照物來說，display inline block不能實現同一行左右兩邊各放乙個元素 float left Left div float right Right div position absolute不能實現元素間的互動，例如元素過長時換行 width 70px...
CSS中 webkit text size adjust none如何相容blink？
仇俊斌 之所以現在的桌面版webkit瀏覽器支援他，是因為實際上這是一下bug。Bug 56543 CSS property webkit text size adjust means different things in Safari and iOS 這個bug在最新版的 WebKit Nigh...
為什麼 CSS 這麼難學？
itsOli 為什麼 CSS 這麼難學？其實我不知道瀏覽到這個問題的童鞋到底是想探索 CSS 是多麼的 不正交 多麼地拍著腦袋設計出來的，多麼的麻煩 還是想看看到底有什麼好的方式去學好這個東西。存在即合理，既然要用到它，這個方法不好學那就換個方法學 搞定 試讀文章 拿下市面上任意主流 靜態頁面 CS...