与CSS的奇怪行为

出于某种原因，我的页脚边框位于页面的顶部，而文字位于底部。谁能告诉我为什么这样做？与CSS的奇怪行为

你可以看到页面here：

我希望红线是刚刚超过我的页脚。我错过了什么？

2012-01-14 Paul

正如下面的答案中提到，你只需要正确处理您的花车。 [将'clear：both'添加到页脚元素将解决此问题]（http://jsfiddle.net/9wnSN/），但我建议阅读@H Bellamy的答案以了解如何使用浮动。 – 2012-01-14 19:52:36

浮动可能会导致这样的布局问题。由于您只在内容容器上使用它们，因此您可以从.search_summary_container中删除float: left;并添加display: inline-block;。

演示：http://jsfiddle.net/ThinkingStiff/HSNNZ/

.search_summary_container { 
    height: auto; 
    width: 480px; 
    margin-top: 10px; 
    border: 1px solid #c1d1da; 
    display: inline-block; 
}

来源

2012-01-14 19:15:11 ThinkingStiff

这个技巧。谢谢！ – Paul 2012-01-14 20:27:07

添加明确：既您的页脚：

<div style="padding-top:10px;border-top: solid 1px #ff0000; font-size:11px; clear:both;">...</div>

解释：如果你有留下了浮动和浮动的权利，那么，来到后的内容会在你的花车去。所以通过清除，它会重置浮动并在浮动内容之后呈现它。

来源

2012-01-14 19:06:59 jValdron

相关提示谢谢，它修复了它。 – Paul 2012-01-14 20:26:46

在页脚中，只需将css设置为clear:both即可。

阅读这篇文章：http://css-tricks.com/all-about-floats/

来源

2012-01-14 19:09:22

与CSS的奇怪行为

回答

相关问题