CSS子級清除父級浮點數

我有一個雙列布局，左邊的邊欄，右邊的內容。CSS子級清除父級浮點數

因此，我將側邊欄左側浮動，並在右側留出內容。一切都很好，並且...

直到，內容的子元素已經清除應用於它，它跳到側邊欄下面。

有沒有辦法讓子元素只浮動並清除它的父容器？

由於一張圖片勝過1000個字，這裏有一個的jsfiddle：

http://jsfiddle.net/qRYYm/1/

來源

2012-08-28 ahren

http://jsfiddle.net/qRYYm/2/ – Peter

@PeterSzymkowski內明確的 - 沒有你是不是要先在jsfiddle中按'更新'？ – ahren

當然，對不起 – Peter

如果添加overflow:auto;到.content應該看到你是對的。

來源

2012-08-28 22:32:21

完美。你能否提供更多的解釋，說明爲什麼這會起作用？ – ahren

問題是，包含DIV的元素在包含浮動元素時不會伸展到最高元素的高度。添加溢出：自動（或隱藏或滾動）將導致它擴大。這裏有更多的信息：http://www.quirksmode.org/css/clearing.html –

只是好奇，DIV的'overflow'默認值是多少？ – Justin

這個怎麼樣：

aside{ 
    position: absolute; 
    height: 300px; 
    width: 100px; 
}

http://jsfiddle.net/qRYYm/2/

來源

2012-08-28 22:28:12 Peter

這就是我以後的效果 - 但它可能沒有使用絕對定位？ – ahren

你應該避免使用清晰。您可以使用溢出：隱藏與主容器

<div class="content"> 
    <div class="one">One</div> 
    <div class="two">Two</div>  
</div> 

.content { float: left; overflow: hidden; width: 900px; } 
aside { float: left; width: 100px; }

而且，你不應該使用保證金左：100px的將內容從左邊欄推開。同時浮起。我發現列喜歡在主包裝中。這很容易。

來源

2012-08-28 22:37:16 ZombieCode

左右浮動不允許第二列佔用剩餘寬度...即;變通。 – ahren

你也可以這樣做。

.left{float:left;} 
.right {float:right;} 
.clear{clear:both;} 

<div> 
    <div class="left">SideBar</div> 
    <div class="right"> 
      <div> 
       <div class="left">content 1</div> 
       <div class="left">content 2</div> 
       <div class="clear"></div> 
      </div> 
    </div> 
    <div class="clear"></div> 
</div>

當任何DIV（S）採用浮動，把它們放在一個父DIV和同一個父DIV

來源

2012-08-30 13:43:46 Dashrath

這將不允許'.right'展開以佔據剩餘的寬度... – ahren

CSS子級清除父級浮點數

回答

相關問題