清除浮动问题

我有一个页面，左侧是标准导航栏，内容区域占据了水平区域的其余部分。对于现代浏览器，我使用表格行和表格单元值来显示属性。但是，对于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

清除浮动问题

回答

相关问题