html - CSS 溢出 :hidden can prevent overlay

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 child不会被 float 的图片覆盖。但是，如果我删除“overflow:hidden”，div child 将被 float 的图片隐藏。

Answer 1

CSS overflow:hidden with floats

请访问此链接并记下最后一秒的答案，这是您问题的答案。在元素上设置 overflow: hidden 会导致创建一个新的 float 上下文，因此在应用了 overflow: hidden 的元素内 float 的元素将被清除。您也可以访问http://jasonkinney.me/power-css-overflow-hidden/