有一个 CSS 与自身作斗争的问题

Question

我有一个“内容”div，它本身包含 3 个浮动：左的 div。下面是页脚。

现在页脚有一个border-top:10px，您会看到它隐藏在内容div 后面。这是因为内容 div 没有调整它的高度，因为它的内容是浮动的。

为了解决这个问题

overflow:hidden

这是问题所在，虽然这解决了高度问题，但它会导致另一个问题。 3 个浮动 div 上有一个 box-shadow，当“内容”容器的溢出被隐藏时，它会切断外部阴影。

这是 jsfiddle http://jsfiddle.net/rhPCE/2/，如您所见，盒子阴影在外面被切掉，如果您删除溢出：隐藏；从 #content 它修复了阴影，但破坏了页脚 div 的定位。

有什么想法吗？ 提前致谢！

Answer 1

当你浮动元素时，父容器自然会塌陷，因为floated elements exist outside the normal document flow。

要解决此问题，您可以将clearfix 应用于#content 容器：

1. 从#content 中删除overflow: hidden;
2. 包括一个clearfix，例如：A new micro clearfix hack
3. 将 clearfix 类应用于#content div，如下所示：<div id="content" class="cf">

此后，您的父容器#content 将扩展至最高浮动元素的高度。

工作示例：http://jsfiddle.net/rhPCE/3/