为什么overflow:hidden 就能清除浮动？

hahahhao

2016-09-28

源自：网页布局基础 3-3

关注问题我要回答

3115

操作

收起

4 回答

zzluyao 回答被采纳 +3 积分
2016-10-05

可以看讲解overflow 视频。那个头像王尼玛的视频　－－

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 回复有任何疑惑可以回复我~