css - 清除浮動不起作用

我有一個明顯的浮動問題，我找不出來。這是HTML代碼：css - 清除浮動不起作用

<div id="main"> 
    <div id="primary"> 
     <div id="content" role="main"> 
     </div><!-- #content --> 
    </div><!-- #primary --> 
    <div id="secondary"> 
    <div><!-- #secondary --> 
</div><!-- #main -->

這是每個元素的CSS：

#main { 
clear: both; 
} 

#primary { 
float: left; 
width: 100%; 
margin: 0 -40% 0 0!important; 
} 

#content { 
background: none repeat scroll 0 0 white; 
box-shadow: 0px 10px 10px 2px #888; 
float: left; 
margin: 0 12.3%!important; 
position: relative; 
width: auto; 
} 

#secondary { 
float: right; 
margin-right: 15%; 
width: 22%; 
position: relative; 
padding-top: 170px; 
}

該網站是建立在WordPress的的header.php如此main開始和結束footer.php。 primary和content div在每個頁面模板中開始和結束，並在primary div結束後在每個頁面模板（get sidebar）中調用secondary div。

問題是內容div在主div結束後立即停止，而輔助div繼續向下延伸。內容div應該延伸到文件的結尾，即輔助文件或主格結束。

您可以在此website上查看實時代碼及其導致的問題。

來源

2012-08-02 George Grigorita

我認爲問題在於'secondary'元素不包含在您網站的'content'元素中，所以顯然'content'不會增長以適應'secondary'。

你需要重新思考你的html結構。

來源

2012-08-02 12:10:53

是的，這確實是問題所在。我已將「二級」div納入「主要」和「內容」中。現在我已經完成修復由此舉產生的所有問題，並且一切正常。謝謝！ – 2012-08-02 13:56:31

@GeorgeGrigorita - 很高興有幫助:) – 2012-08-02 13:59:18

父元素永遠不會展開以包含浮動元素。要讓該元素展開以包含它們，可以將overflow: auto添加到父元素中，以便在大多數情況下將包含溢出元素的浮動元素。我無法找到應用該元素的元素，因此您可能已經完成了其他操作。 position：absolute在正常流程中被取出並且父元素不會包含它們的問題。

來源

2012-08-02 12:05:46 Rob

css中的clear屬性需要應用到代碼中的新div。它通過在父元素內的所有浮動元素下面啓動div來工作。它看起來像這樣：

<div id="main"> 
    <div id="primary"> 
    <div id="content" role="main"> 
    </div> 
    </div> 
    <div id="secondary"> 
    <div> 
    <div style="clear: both"></div> <!-- Don't do inline styles --> 
</div>

這應該這樣做。您還應該取出#main's CSS上的clear: both。這不是必需的。

來源

2012-08-02 12:09:36 Jon

它，因爲float

給overflow property到你的父母。

或創建一個額外的div，並給clear:both

一個基於浮動的佈局編碼的時候，我們面臨的共同問題是，包裝容器不會擴展到孩子的身高浮動elements.The典型解決方案解決這個問題的方法是在浮動元素之後添加一個clear float的元素或將clearfix添加到包裝器中。但是你也可以使用overflow屬性來解決這個問題。這也不是一個新的CSS技巧。很久以前就有記載。

來源

2012-08-02 12:10:25 Prashobh

css - 清除浮動不起作用

回答

相關問題