為什么overflow:hidden 就能清除浮動？

hahahhao

2016-09-28

源自：網頁布局基礎 3-3

關注問題我要回答

3149

操作

收起

4 回答

zzluyao 回答被采納 +3 積分
2016-10-05

可以看講解overflow 視頻。那個頭像王尼瑪的視頻?。?/p>

0 回復有任何疑惑可以回復我~

收起回答

hahahhao 提問者

沖你這么有誠意的回答，也要把分給你！

2016-10-10 回復有任何疑惑可以回復我~

慕少7532173

你說的是張鑫旭這位靈魂畫手吧哈哈哈

2016-10-24 回復有任何疑惑可以回復我~

慕粉4257757
2016-10-29

建議去看css2.1規范第9章部分，答案都在那里。。。

原理是BFC相關

0 回復有任何疑惑可以回復我~

收起回答

慕少7532173
2016-10-24

觸發BFC的集中情況：1.float不為none 2.position不為relative/static 3.overflow為auto/hidden/scroll 4.display為table-cell/table-caption/inline-block ? ? ?有時候需要處罰BFC卻又不能設置溢出隱藏overflow：hidden，此時可考慮使用其他觸發BFC的方式

0 回復有任何疑惑可以回復我~

收起回答

Angrydigital
2016-09-28

overflow是作用在浮動元素的父元素上的。使用了overflow:hidden的父元素要計算超出的部分然后進行隱藏，那么他就會撐開自身把所有的子元素包裹進來。寫層的時候一般都用div，而div是塊元素。

<div?class="father">
????<div?class="sun"></div>
????<div?class="sun"></div>
</div>

如果兩個sun層都用了float，那么father層就會失去寬度。緊接著father層的div就會受到浮動影響跟在sun層后面。要清除sun的浮動影響。只要給father層添加ouverflow:hidden就可以。因為添加了之后father層就會在該行撐開包裹進他的子元素（sun）。和clean:both不同的是前者用在浮動元素的父層，后者用在浮動元素本身。

好像是這樣。

0 回復有任何疑惑可以回復我~

收起回答

hahahhao 提問者

“緊接著father層的div就會受到浮動影響跟在sun層后面”，不會把父層還能跟到sun后邊？float不是只影響緊挨著他后邊的一個元素嗎

2016-09-28 回復有任何疑惑可以回復我~

Angrydigital 回復 hahahhao 提問者

緊接在father層后面的同級的div塊。<div class="father">...</div><div class="this"></div>

2016-09-28 回復有任何疑惑可以回復我~

Angrydigital 回復 hahahhao 提問者

對啊。但是他要計算哪一部分是超出的。所以要把他所有的子元素包裹進去才能計算哪些是超出的。

2016-09-29 回復有任何疑惑可以回復我~