之前经常是这样布局的，用一个div（id=Main）包住左边div（id=DivLeft）和右边div（id=DivRight）,Main随着DivLeft和DivRight内容的高度而自动伸缩，从而达到动态布局的效果。
#Main｛
width：980px
height：auto;
margin:0 auto;//使Main居中布局
｝
#DivLeft｛
250px;
height:auto;
float:left;
｝
#DivRight｛
width：730px;
height:auto;
float:right;
｝
可是这样的效果达到了左边一个div右边一个div的目的，可以Main这个父div并没有将他们包含，致使网页凌乱。
后来在网上找到一种解决方法，是这样的，我也不太明白具体的含义。反正达到效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这段不能去掉，因为可能网页要遵循这种规范。
还有一个问题，就是比如左边div（DivLeft）当它的内容越来越多的时候，内容并不完全能自动在div里自动换行，所以有些文字会超出div的边缘，这样也会造成网页的错乱。
解决方法是在这个div上应用这两个样式：word-wrap:break-word; overflow:hidden;
经过实践，上面的做法只在火狐和谷歌浏览器可用。有时候在IE中不能。
解决方法：在父div也应用float：left，或者在添加一个空的div，应用clear：left
主要是这个样式：
.box:after
{
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
有时候在IE6、7下面还是不行，那么可以在父容器中，加入overflow:hidden;
还是在子元素哪里，添加一个<div style='clear:left'></div>好用。