CSS中為什麼overflow:hidden能清除浮動(float)的影響？原理是什麼？
阿新 • • 發佈：2019-02-20
**
說法一：
**overflow:hidden 的意思是超出的部分要裁切隱藏掉
那麼如果 float 的元素不佔普通流位置
普通流的包含塊要根據內容高度裁切隱藏
如果高度是預設值auto
那麼不計算其內浮動元素高度就裁切
就有可能會裁掉float
這是反佈局常識的
所以如果沒有明確設定容器高情況下
它要計算內容全部高度才能確定在什麼位置hidden
浮動的高度就要被計算進去
順帶達成了清理浮動的目標
同理
overflow 非預設值
position 非預設值
float 非預設值
等都是遵循這個佈局計算思路.
作者：貘吃饃香
來源：知乎
說法二：
因為height: auto;的計算結果不是一定為0的。
正常父元素包含浮動子元素，父元素的高度確實為0。
但是父元素overflow:hidden;後，首先會計算height: auto;的真實高度，由於其觸發了BFC，需要包含子元素，所以高度不是0，而是子元素高度。
這時overflow:hidden;才起到隱藏作用，不過父元素高度足夠大，所以子元素沒有被隱藏。
總之，是先計算真實高度，再去隱藏。如果是先直接隱藏了，再去計算高度也就沒有意義了。
作者：hgm
來源：知乎
關於BFC，需要單獨整理。