與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的奇怪行爲

回答

相關問題