自适应高度问题，求解，内有浮动

大概的结构式这样 

body 
{
  main
  {
  top
  middle
  bottom
  } 
}
上面是一个div嵌套的示意，我把main做了一个宽1000px的白板 然后内部内容我用的是930px，这样俩边留出白边，感觉很好看，margin都是auto，但是没有做float，如果做了float，三个框架就会左对齐，我不知道什么原因，所以暂时没管，但是当我middle填充内容的时候，整体会撑出main，就是页脚跨出白板了，我没有设置main的高度，本想会自适应，但是没想到。。查了一下，我在top里面有做导航菜单，有做隐藏，而且浮动也有，我不知道如何能让我的main自适应top middle bottom的高度，求指教，另外，三个框架设置float后，白板会变成一小条，也不是很明白，查书没有找到相关的内容，真是着急了。。

当main设置成
.main{margin:0px auto;width:1000px;}
的同时，里面还得加一个float的内部层暂定main_inside

<div class="main">
  <div class="main_inside">
  <div cl....top middle bottom></div>
  </div>
</div>

.main_inside{width:930px; float:left; padding:20px;}

这其实就是常见的高度自适应问题
主流的解决有三种，针对你这种情况解决方法如下
方法一：在bottom后加一个空的div
CSS code

<div style="clear:both;height:1px;font-size:1px;line-height:1px;overflow:hidden;"></div>

方法二：给main定义以下样式
CSS code

#main{zoom:1;overflow:auto;}

方法三：用after伪类

其实三种方法的目的都是为了闭合浮动