浮動元素

我有一些浮動元素，比如除了內容區域之外還浮動的側邊欄。如果我沒有在側邊欄末尾添加 ，則頁腳和背景的某些部分變得很奇怪。浮動元素

我錯過了想到的任何快速解決方案？

謝謝。

編輯：例如，我希望邊框沒有間隙，背景也不應有空格。如果只是看起來像兩個部分：1）內容與側邊欄2）頁腳

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>layout</title> 

    <style type="text/css"> 

    body { 
     margin:0; 
     padding:0; 
    } 

    #main { 
     background:#cfcfcf; 
    } 

    .inner { 
     margin: 0 auto; 
     padding: 96px 72px 0; 
     width: 1068px; 
     border-color: #000; 
     border-style: solid; 
     border-width: 0 1px; 
     color: #3C3C3C; 
    } 

    .post { 
     width: 705px; 
     background:#999; 
     float:left; 
    } 

    #comments, #respond { 
     background:#999; 
    } 

    #sidebar { 
     background:#777; 
    } 

    #footer { 
     clear:both; 
     background:gray; 
    } 

    </style> 
</head> 
<body> 

    <div id="main"> 

     <div class="inner"> 

      <div id="post" class="post"> 

       <h2>Lorem Ipsum Test Page</h2> 

       <div class="entry"> 

        <p>Lorem ipsum sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 

        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 

       </div> <!-- entry --> 

      </div> <!-- post --> 

      <div id="sidebar"> 

       <h2>Meta</h2> 
        <ul> 
         <li>Login</li> 
         <li>Anything</li> 
        </ul> 

       <h2>Subscribe</h2> 
        <ul> 
         <li>Entries (RSS)</li> 
         <li>Comments (RSS)</li> 
        </ul> 

      </div> <!-- sidebar --> 

     </div> <!-- inner --> 

    </div> <!-- main --> 

    <div id="footer"> 
     <div class="inner"> 

     Something 

     </div> <!-- inner --> 
    </div> <!-- footer --> 

</body> 
</html>

來源

2011-01-12 matt

什麼是你的HTML和CSS代碼的div？ – BoltClock 2011-01-12 20:28:48

好文章：http://css-tricks.com/all-about-floats/ – kapa 2011-01-12 20:34:23

您可以將包含元素overflow屬性設置爲visible以外的值。

來源

2011-01-12 20:32:24 Jim

你可以只讓頁腳所以它與clear: both風格。

來源

2011-01-12 20:29:20 Jacob

正確的方法是清除下一個元素的左側和右側。

所以在頁腳您可以添加：

#footer { 
    clear: both; 
}

這會迫使頁腳，深入到下一行，這是「正確」的方式。稍後更改設計也會更容易，因爲您不必更改標記，只需要CSS。

來源

2011-01-12 20:32:01

我編輯了我的文章。請看一看。在這種情況下你將如何解決它。一個簡單的明確：兩個都沒有做的工作...背景和邊界是越野車 – matt 2011-01-12 20:37:59

display: inline-block;真的很不錯。太糟糕的IE並不真的支持它。

來源

2011-01-12 20:34:57 tdammers

說實話，我不會試圖繞過它。你可以像其他人所建議的那樣把清楚的東西放在頁腳中;但你不能保證你的html的其他部分不會被錯誤地浮動或阻止。如果您採用僅在清除元素時遇到由於HTML中隨機部分浮動而導致元素混亂的策略;你可能會養成一直這樣做的習慣。相反，下面是通常保證了其他元素將被不正確地浮動風格的例子：

<div> 
    <div style="float:right;"></div> 
    <div style="float:right;"></div> 
    <!--Add a clear div as last sibling of any floated elements--> 
    <div style="clear:both;"></div> 
</div>

而且，我會用一個空div代替BR的。那只是我而已。

所以從你的例子繪製：

 </div> <!-- post --> 

     <!-- insert empty clear div hear --> 
     <div style="clear:both;"></div> 

     <div id="sidebar">

來源

2011-01-12 20:40:55 Dave

浮動元素<br /><br /><br /><br /><br /\><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

回答

浮動元素<br /><br /><br /><br /><br /\><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

回答

相關問題