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

Question

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

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

将const {Prop1, ...otherProps} = a; const newObj = {Prop3: Prop1, ...otherProps}; 添加到容器时，您正在创建块格式化上下文。段落元素的边距将包含在overflow: hidden;。

中

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

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

.container