为什么页脚会跑上去呢?如图
<title> 固定宽带且剧中页面</title>
<style>
body {padding:0; margin:0; text-align:center;}
#main {width:800px; padding:0; margin:0 auto; background:#900}
#header { width:100%; height:100px; background:#06F}
#left { float:left; width:300px; background:#936}
#right { float:right; width:500px; background:#366}
#foot {background:#90F; clear:both;;width:100%; height:50px}
</style>
<body>
<div id="main">
  <div id="header">   
  </div>
  <div id="left">
    <p>A</p>
    <p>B</p>
    <p>&nbsp;</p>
  </div>
  <div id="right">
    <p>1</p>
    <p>2</p>
    <p>3  </p>
    <p>4</p>
    <p>5</p>
  </div>  
  <div if="foot">
    这是我的脚
  </div>
</div>
</body>div布局

解决方案 »

  1.   

    哦这是因为你没有清除浮动left和right都是浮动的div 后边的div会放在它们下边(并且尽可能的贴着放)在foot这个div之前加一个<div style="clear:both"></div>或者用一个div把left和right包起来 就可以了.
      

  2.   

    另外你这个盒子模型还有个小问题 foot的id写成了"if"
      

  3.   

    http://www.colg.biz/demo/d1.html
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> New Document </title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <meta charset="utf-8"><title> 固定宽带且剧中页面</title>
    <style>
    body {padding:0; margin:0; text-align:center;}
    #main {width:800px; padding:0; margin:0 auto; background:#900}
    #header { width:100%; height:100px; background:#06F}
    #left { float:left; width:300px; background:#936}
    #right { float:right; width:500px; background:#366}
    #foot {background:#90F;width:100%; height:50px}
    .clear {clear:both;}
    </style></head>
    <body>
    <div id="main">
      <div id="header">   
      </div>
    <div>
      <div id="left">
        <p>A</p>
        <p>B</p>
        <p>&nbsp;</p>
      </div>
      <div id="right">
        <p>1</p>
        <p>2</p>
        <p>3  </p>
        <p>4</p>
        <p>5</p>
      </div>
    <div class="clear"></div>
    </div>
      <div id="foot">
        这是我的脚
      </div>
    </div>
    </body>
    </html>
      

  4.   

    哈,原来是我id="foot" 写成if="foot"
    改过来就行了。DW没有纠错功能,真失败。另外,用一个div包住浮动的left和right,也是一个不错的方法。谢谢哈