一些疑慮涉及到在特定情況下使用CSS清除屬性

也許這是一個愚蠢的問題，但我對CSS有疑問明確 propery的使用。一些疑慮涉及到在特定情況下使用CSS清除屬性

我有這樣的模板：http://onofri.org/example/WebTemplate/

爲什麼如果我刪除（你可以用螢火蟲嘗試）的屬性格式明確：既從#footcontainer DIV我獲得這個div被放置在頂部（但幾乎下面的標題和兩列下面）

我的想法是這樣的事情發生，因爲兩列＃內容和#sidebar是浮動到左邊，無需設置明確：既在#footcontainer div瀏覽器試圖把這個div放在＃內容 * div的右邊，但沒有空間放在頂部。

這是一個正確的直覺還是我錯過了什麼？

TNX

安德烈

來源

2013-07-10 AndreaNobili

你不應該需要通過你的CSS文件導入，但直接從標籤本身。 – moonwave99

-1

我想這是因爲，如果你漂浮的物體，父對象不相應調整。

例如，如果您有：

<div class="1px-border"> 
    <div class="float"> 
      <h3>TEST</h3> 
    </div> 
</div>

邊框是完全平坦的，而不是調整到頭部。您可以通過在容器div中使用overflow：auto來修復它。

這就是說，我可能是大錯特錯。

來源

2013-07-10 12:14:15 Jacob

我看你的代碼

你的代碼是太複雜，根據我但任何方式可以用來到this css比你的問題是解決

用於這個CSS

#c{position:relative;} 
     #c:after { 
     position: absolute; 
     content: ""; 
     left: 0; 
     right: 0; 
     bottom: -42px; 
     background: url('http://onofri.org/example/WebTemplate/images/footerRight.jpg') no-repeat -3px 0px; 
     height: 43px; 
     } 
    #footerRight{display:none;}

來源

2013-07-10 12:23:00

您的容器上沒有設置高度。如果將容器的高度更改爲「其內容的高度（在本例中爲596 px），那麼當您清除頁腳上的兩個屬性時，它將不會移動一個iota。

來源

2013-07-10 12:24:08

請你能更好地解釋我這件事（我對它很感興趣）。你告訴我，內容的高度是596px，你怎麼看？我沒有設置高度#content div。你究竟是什麼意思？你能詳細解釋我嗎？ Tnx – AndreaNobili

發生這種情況是因爲每次浮動元素時，其容器都會失去其自動高度。如果你想避免這種情況發生，還有出頭，你可以這樣做：

設置一個給定的高度和容器

例：

<div class="my-container" style="height: 100px"> 
    <div style="float: left;"> 
    Some very interesting text right here. 
    </div> 
    <div style="float: left;"> 
    Don't read this and you'll be doomed. 
    </div> 
</div>

請注意，如果您已設置一個給定的高度，當內容變得比容器更高時，div不會調整大小。

<div class="my-container"> 
    <div style="float: left;"> 
     Some very interesting text right here. 
    </div> 
    <div style="float: left;"> 
     Don't read this and you'll be doomed. 
    </div> 
    <div style="clear:both"></div> 
    </div>

是啊，它的工作原理：

的浮動元素

防爆之後追加與style="clear: both"一個div。但只有新手這樣做。它不優雅，污染你的代碼。

設置overflow: hidden父容器

<div class="my-container" style="overflow: hidden"> 
    <div style="float: left;"> 
     Some very interesting text right here. 
    </div> 
    <div style="float: left;"> 
     Don't read this and you'll be doomed. 
    </div> 
    </div>

這一個是偉大的，但你處於危險之中，如果你有成才絕對定位，並有將其移到父DIV之外，例如。你會有一個不愉快的驚喜。

使用ClearFix Hack。

這是我這樣做的方式：容易實施，並像魅力一樣工作。檢查此鏈接：http://www.positioniseverything.net/easyclearing.html;例如，如果您介意沒有有效的CSS（例如我），則可以使用不同的樣式表和條件註釋來針對IE瀏覽器。

關於該主題的更多資源：

Quirks模式網站：CSS結算 http://www.quirksmode.org/css/clearing.html
克里斯Coyier的ClearFix教程 http://css-tricks.com/snippets/css/clear-fix/

來源

2013-07-10 13:39:40 darksoulsong

一些疑慮涉及到在特定情況下使用CSS清除屬性

回答

相關問題