你这代码，本身就问题，，
<div style="overflow:autowidth:100%">是什么情况下出现滚动条呢？
就是在这个div里的元素宽度超出了100%后才会出现
那你的元素又用了float:left，左浮动，右浮动是什么，，就是所有用了的元素，向左浮动靠拢，它虽然是在一行，但是只是看起来在一行而已，其实因为用了float，，，浮动浮动，意思很明显，已经浮起来了，不在行内的，所以会一直向左浮动，，即使容器再小，它也是继续向左浮，，看起来就像是换了行一样。
<div style="height:400px width:480pxoverflow-x:auto"><div style="width:1200pxheight:380pxbackground:#f00"></div>
</div>
1、一列布局：一般都是固定的宽高，设置margin : 0 auto来水平居中，用于界面显著标题的展示等。
2、两列布局：说起两列布局，最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果，以及需要及时清除浮动。
3、三列布局：两侧定宽中间自适应,首先设置父级元素的宽度，可以左左右设置浮动。然后中间设置margin调整间距。 也可以都设置成左浮动，设置margin，调整间距。同样注意清除浮动的影响。
4、混合布局：在一列布局的基础上，保留top和foot部分，将中间的main部分改造成两列或三列布局，小的模块可以再逐级同理划分。
