在HTML \ CSS模板有關clear屬性的頁腳有些疑惑

我有使用HTML + CSS實現以下固定tabless佈局：http://onofri.org/example/WebTemplate/在HTML CSS模板有關clear屬性的頁腳有些疑惑

（我必須完成一些設置）

這佈局有兩個floatted列＃內容和#sidebar和這些列下放置有頁腳DIV #footcontainer

好了，所以我必須明確我將放置在兩列之下的元素（帶回文檔的正常流程中的元素），爲此我使用清除 CSS屬性。

我讀過，我可以做一些不同的方式。

在我的例子中，我已經創建了有一個空的DIV ID clearer2具有以下CSS設置：

#clearer2{ 
    clear: both; 
}

這項工作做得很好，但我知道，我也可以清楚直接的footercontainer，在這方法：

#footcontainer { 
    clear: both; 
    width: 100%; 
    min-height: 200px; 
    height: auto !important; 
    height: 200px; 
    background: #4f4f4f url(../images/bgfooter.jpg) repeat-x 0 0; 
    box-shadow: 0 -13px 25px 5px #b2b2b2; 
}

在邏輯電平應該是相同的事情，因爲我設置明確：兩者;屬性，然後該屬性對所有後續項目有效。但在網上閱讀，在我看來，第一個解決方案比第二個解決方案更好。爲什麼是更好地創造一個新的項目（如空格）說清楚再去做直接在相應的元素（在本例中的div #footercontainer）

，我有使用，是一個有效的解決方案該如何解決？

TNX

安德烈

來源

2013-07-21 AndreaNobili

請包括HTML，因爲您的示例頁面將會消失。那麼沒人能重建整個問題。 –

從樣本頁面中，你有兩個版本。

HTML空更清晰div

<div id="container"> 
    <div id="content">...</div> 
    <div id="sidebar">...</div> 
    <div class="clearer"></div> 
</div> 
<div id="footcontainer"> 
    <div id="footer">...</div> 
</div>

CSS：

#content, #sidebar { float: left; } 
.clearer { 
    clear: both; 
    visibility: hidden; 
}

，沒有一個空div

<div id="container"> 
    <div id="content">...</div> 
    <div id="sidebar">...</div> 
</div> 
<div id="footcontainer" class="clearer"> 
    <div id="footer">...</div> 
</div>

CSS：

#content, #sidebar { float: left; } 
.clearer { clear: both; }

兩種方法都是有效的，視覺效果是一樣的。

但在第一個示例中，container的高度爲非零，因爲div更清晰。由於浮動div從正常流程中移除，因此第二個示例中的container沒有內容和零高度。

來源

2013-07-21 10:28:09

當你說我時，你到底意味着什麼：第一個例子（使用#clearer2 div的那個）具有非零高度（div是空的，因此它的heig爲零，或者不是？） Tnx – AndreaNobili

在第一個例子，容器中有清晰的'div'。所以，第一個容器是* not *空，並且具有非零高度。 –

在HTML \ CSS模板有關clear屬性的頁腳有些疑惑

回答

相關問題