Html渲染元素乱序

Question

我的页面布局有问题。我不得不混合使用表格和 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-->

Answer 1

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