javascript - Div 没有覆盖其中的内容(垂直)div 内部没有 float

Question

我的 div 没有覆盖其中的所有内容。我研究了这个，我能发现的是这个问题是由于 float 引起的，要修复它，请将其添加到 css 中:

overflow: hidden;

但是在我的div中没有​​ float ，上面的答案没有解决问题。上面的代码所做的是它隐藏了 div 未覆盖的额外内容(div 仅用于内容的背景颜色)。

这是我的 div 的代码:

#div {
  width: 570px;
  margin: 0 auto;
  background-color: #fff;
  padding-bottom: 25px;
  margin-top: 25px;
  border: 1px solid #bbb;
  //overflow: hidden; doesn't fix anything.
}

非常感谢任何帮助!

谢谢，艾尔

Answer 1

这基本上是折叠 DIV 的情况；有几种方法可行。

不同的设计采用不同的方法来修复它们。

你说的溢出法就是一种。

• 您还可以在内部创建另一个具有 clear: both; 的 div，这会将空 div 放在 float 之后，从而提供包装 div 大小。
• 还有一个 clearfix 方法，它使用 :after

有关详细信息，请参阅本文:https://css-tricks.com/all-about-floats/

更新

没有 float ，我看到的另一个问题是没有高度信息；有时，您还需要为父对象提供高度。

其他更新

根据我们在这个问题上的对话，我发布了这个......

还要记住观察子元素的高度和位置。不正确的设置会产生一些奇怪的结果。