清除浮動問題

我有一個頁面，左側是標準導航欄，內容區域佔據了水平區域的其餘部分。對於現代瀏覽器，我使用表格行和表格單元值來顯示屬性。但是，對於IE7，我包含一個試圖浮動導航欄的條件樣式表。清除浮動問題

這個工程除了當內容區域本身浮動元素很好，我儘量用清晰。我的目標是在內容區域浮動後立即顯示清晰元素，而不是在導航區域下方移動。

以下演示代碼顯示此問題。我的目標是讓表格顯示在「leftThing」和「rightThing」的正下方，但是它們和表格之間有很大的差距。

<html> 
    <head> 
     <title>Float Test</title> 

     <style type="text/css"> 
      #body { 
       background: #cecece; 
      } 

      #sidebar { 
       background: #ababab; 
       float: left; 
       width: 200px; 
      } 

      #content { 
       background: #efefef; 
       margin-left: 215px; 
      } 

      #leftThing { 
       background: #456789; 
       float: left; 
       width: 100px; 
      } 

      #rightThing { 
       background: #654321; 
       float: right; 
       width: 100px; 
      } 

      table { 
       clear: both; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="body"> 
      <div id="sidebar"> 
       <ul> 
        <li>One</li> 
        <li>Two</li> 
        <li>Three</li> 
       </ul> 
      </div> 
      <div id="content"> 
       <div style="position: realtive;"> 

       <div id="leftThing"> 
       ABCDEF 
       </div> 
       <div id="rightThing"> 
       WXYZ 
       </div> 

       <table> 
        <thead> 
         <th>One</th> 
          <th>Two</th> 
         </thead> 
         <tr> 
           <td>Jason</td> 
         <td>45</td> 
        </tr> 
        <tr> 
         <td>Mary</td> 
         <td>41</td> 
        </tr> 
       </table> 

       <p>Exerci ullamcorper consequat duis ipsum ut nostrud zzril, feugait feugiat duis dolor feugiat commodo, accumsan, duis illum eum molestie luptatum nisl iusto. Commodo minim ullamcorper blandit, nostrud feugiat blandit esse dolore, consequat vulputate augue sit ad. Facilisi feugait luptatum eu minim wisi, facilisis molestie wisi in in amet vero quis.</p> 
      </div> 

      </div> 
     </div> 
    </body> 
</html>

謝謝你的幫助。

來源

2010-03-24 Jason

只要清理桌子右側，然後清除底部的導航欄。查看下面的更新代碼。

<html> 
    <head> 
     <title>Float Test</title> 

     <style type="text/css"> 
      #body { 
       background: #cecece; 
      } 

      #sidebar { 
       background: #ababab; 
       float: left; 
       width: 200px; 
      } 

      #content { 
       background: #efefef; 
       margin-left: 215px; 
      } 

      #leftThing { 
       background: #456789; 
       float: left; 
       width: 100px; 
      } 

      #rightThing { 
       background: #654321; 
       float: right; 
       width: 100px; 
      } 

      table 
      { 
      clear: right; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="body"> 
      <div id="sidebar"> 
       <ul> 
        <li>One</li> 
        <li>Two</li> 
        <li>Three</li> 
       </ul> 
      </div> 
      <div id="content"> 
       <div> 
        <div id="leftThing">ABCDEF</div> 
        <div id="rightThing">WXYZ</div> 
        <table> 
         <thead> 
          <th>One</th> 
          <th>Two</th> 
         </thead> 
         <tr> 
          <td>Jason</td> 
          <td>45</td> 
         </tr> 
         <tr> 
          <td>Mary</td> 
          <td>41</td> 
         </tr> 
        </table> 
        <p>Exerci ullamcorper consequat duis ipsum ut nostrud zzril, feugait feugiat duis dolor feugiat commodo, accumsan, duis illum eum molestie luptatum nisl iusto. Commodo minim ullamcorper blandit, nostrud feugiat blandit esse dolore, consequat vulputate augue sit ad. Facilisi feugait luptatum eu minim wisi, facilisis molestie wisi in in amet vero quis.</p> 
       </div> 
      </div> 
      <div style="clear: both;"></div> 
     </div> 
    </body> 
</html>

來源

2010-03-24 21:11:49

哇。那很簡單。我認爲我的問題是我太專注於將導航和內容區域視爲單獨的列而不是整體。或者，也許內容「容器」不允許我看到解決方案。謝謝你，Durilai。 – Jason 2010-03-24 21:32:39

如果「leftThing」的高度高於「rightThing」，則不起作用。還有其他解決方案嗎？ – Leto 2011-11-04 12:54:50

這裏的解決方案： Block formatting contexts

因此，如果您的「內容」塊是絕對位置，或浮，或顯示的內聯塊，等等=>子元素的clear屬性不會延長在「內容」塊之外（在你的情況下，延伸到你的邊欄）。

來源

2011-11-04 13:25:52 Leto

清除浮動問題

回答

相關問題