1

http://zergxost.com/test.html

正如你所看到的，如果没有足够的文本，底部的灰色线会比它应该的高得多。有人可以解释为什么“文章”的命中框不包含“标题”吗？以及如何修复它？谢谢。

4

2 回答 2

2

您缺少 aoverflow: hidden或clear: left声明。您应该始终清除浮动对象或将溢出声明为隐藏（小心！）。

article {
  overflow: hidden;
}

或者：

div#wrapper div.related {
  width: 100%;
  height: 960px;
  border-top: 1px solid #808080;
  margin-top: 20px;
  clear: left;
}

为什么/如何overflow: hidden工作

当您将块级元素设置为 haveoverflow: hidden时，您实际上是在告诉浏览器更改它处理块元素的方式。从功能上讲，您告诉浏览器包含普通元素（包括浮动元素）。超出盒子总尺寸的东西，通常是通过相对/绝对定位，或者具有巨大宽度的图像，将被剪裁到包装器的宽度。跨越容器的下拉区域overflow: hidden可能会导致它们在进入时被剪裁。

容器末尾的元素overflow: hidden也将应用 padding-bottom 和 margin-bottom。

另一个答案：https ://stackoverflow.com/a/3416217/24950

于 2012-06-27T17:23:22.713 回答
1

你需要清除div#wrapper div.related. 尝试将以下内容添加到您的 CSS 中：

div#wrapper div.related {
    clear: both;
}
于 2012-06-27T17:21:24.433 回答