这里是重现失败的最低版本:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<style type="text/css">
.clear{clear:both;}
.col{float:left;}
.row{margin-bottom:30px;background-color:red;}
</style>
</head>
<body>
<div class="row">
<div class="col">Lorem Ipsum</div>
<div class="clear"></div>
</div>
</body>
</html>
这是 Firefox 的 Bug 或者我误解了什么。 编辑: 忘记解释问题了。当我将 .row 的 margin-bottom 与 .col 中的 float 结合使用时，该元素将被下拉以获得与 .row margin-bottom 具有相同的值
最佳答案
我不完全确定为什么 Firefox 在这里的行为与其他浏览器不同。这与 collapsing margins 有关.
但是，您可以通过以下方式轻松修复它(在 Firefox 中不会向下移动，浏览器之间保持一致):
- 正在添加
overflow: hidden至.row作为清除 float 的替代方法。
然后您可以删除 <div class="clear"></div>因为不再需要它。
关于css - Firefox 解释 margin-bottom 错误。也许是一个错误？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5272091/