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

Question

.container 中的overflow: hidden 导致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>

Answer 1

您看到的额外间距来自段落边距及其处理方式。

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

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

要使段落与 float 元素对齐，请移除段落元素的上边距:

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