html - 隐藏的溢出导致子元素出现在自己的行中

overflow: hidden中的.container导致p标记下降到其自己的行上，而不是环绕。为什么是这样？

.container {
	background-color: green;
	overflow: hidden;
}

.floated {
	float: left;
	background-color: cyan;
}
p {
	background-color: pink;
}

<div class='container'>
		<div class='floated'>
			Floated Div
		</div>
		<p>Some textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p>
</div>

最佳答案

您看到的额外间距来自段落边距和它们的处理方式。

将overflow: hidden;添加到容器时，您将创建一个块格式化上下文。段落元素的边距将包含在.container中。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

要将段落与浮动元素对齐，请删除段落元素的上边距：

p {
    background-color: pink;
    margin-top: 0;
}