Html渲染元素乱序答案

【问题标题】：Html rendering elements out of orderHtml渲染元素乱序
【发布时间】：2011-09-20 15:27:50
【问题描述】：

我的页面布局有问题。我不得不混合使用表格和 div。问题出现在页脚和包含表格的 div 上。页脚显示在该 div 上方，但在 html 中，它是我在“main_container”中的最后一个元素。

<style>
 #sidebar {
            position: relative;
            display: block;
            float: left;
            width: 30%;
          }
 #TblContain {
               position: relative;
               display: block;
               float: right;
               width: 70%;
             }

 #footer {
           position: relative;
           width: 100%;
           display: block;
         }
</style>
<div id="main_container">
<div id="head">
</div>

<div id="nav_bar">
</div>

<div id="content">
<div id="sidebar">
</div>
<div id="TblContain">
 <table></table>
</div><!--endTblContain-->
</div><!--endContent-->

<div id="footer">
</div><!--endFooter-->
</div><!--endMainContain-->

【问题讨论】：

标签： html css out

【解决方案1】：

如果清除：左；不起作用，尝试添加 clear:both;到 css 中的页脚。

【讨论】：

由于它的工作并且您使用了某人的建议，您应该选择他的答案作为正确的答案，原因有两个：1.奖励帮助者积分。 2. 未来的访客会更容易找到解决方案。

【解决方案2】：

这比尝试浮动 div 要容易得多。此外，它还可以让您的页面重新调整大小，并使您的个人内容区域可滚动。

<html>
  <body style="overflow:hidden;">
     <div id="header" style="overflow:hidden; position:absolute; top:0; left:0; height:50px;right:0px;background-color:#FF0000;"></div>
     <div id="leftNav" style="overflow:auto; position:absolute; top:50px; left:0px; right:200px; bottom:50px;background-color:#00FF00;"></div>
     <div id="mainContent" style="overflow:auto; position:absolute; top:50px; left: 200px; right:0px; bottom:50px;background-color:#0000FF;"></div>
     <div id="footer" style="overflow:hidden; position:absolute; bottom:0; left:0; height:50px;right:0px;background-color:#FFFF00;"></div>
  </body>
</html>

http://jsbin.com/ugoli3/2/edit

【讨论】：

【解决方案3】：

尝试添加：

clear: left;

到页脚。

【讨论】：