css溢出：隐藏可以防止叠加

Question

最近尝试使用float并发现overflow: hidden行为难以理解。

.child {
	width: 100px;
	height: 200px;
	background-color: #afe;
	overflow: hidden;
}

img.fl {
	float: left;
}

<img class="fl" src="./images/bdlogo.png">
<div class="child">
</div>

当子类中有“overflow: hidden”时，div子项不会被浮动的图片覆盖。但如果我删除“溢出：隐藏”，div子将被浮动图片隐藏。

Answer 1

CSS overflow:hidden with floats

Plz访问此链接并记下最后一个答案，这是您的问题的答案。 设置overflow：隐藏在元素上会导致创建一个新的float上下文，因此清除浮动在具有overflow：hidden应用的元素内的元素。 您还可以访问http://jasonkinney.me/power-css-overflow-hidden/