我有一个“内容”div，它本身包含3个浮点数：div . 下面是页脚 .
现在页脚有一个border-top：10px，你会看到它隐藏在内容div后面 . 这是因为内容div不会调整它的高度，因为它的内容是浮动的 .
为了解决这个问题我做了
overflow:hidden
这是问题，虽然这解决了高度问题，但它会导致另一个问题 . 3个浮动的div在它们上面有一个盒子阴影，当“内容”容器的溢出被隐藏时，它会切掉外面的阴影 .
这是jsfiddle http://jsfiddle.net/rhPCE/2/，你会看到，盒子阴影在外面被砍掉，如果你移除溢出：隐藏;从#content它修复阴影但打破了页脚div的定位 .
有任何想法吗？提前致谢！
1 回答
浮动元素时，父容器会自然崩溃，因为floated elements exist outside the normal document flow .
要解决此问题，您可以将clearfix应用于
#content容器：从
#content删除overflow: hidden;包含一个clearfix，例如：A new micro clearfix hack
将clearfix类应用于
#contentdiv，如下所示：<div id="content" class="cf">在此之后，您的父容器
#content将扩展到最高浮动元素的高度 .工作实例：http://jsfiddle.net/rhPCE/3/