CSS.2中才引入浮动，当时浮动的初衷，是实现类似word里的文字环绕图片的效果。
普通文档流，因为从上到下，从左到右，规定的太死了，每个元素都被限制了位置。所以才引入了浮动，形成丰富的页面效果。
定位的引入，更加增强了，页面布局的可能。
总的来说，页面布局的时候，有三种布局方式：普通文档流，浮动，定位。
希望对你有所帮助。希望能采纳。
三种方法可以解决：1、给父元素（也就是你的.new）加一个overflow:hidden；
2、将父元素也一起浮动（这个比较复杂，会影响到父元素的同级元素）；
3、在父元素的最后一个子元素（也就是你的ul标签）后边再增加多一个非浮动的子元素，然后将这个子元素加个clear（例：<div style="clear:both"></div>）
至于第3种方法的原理嘛…是因为父元素一定会包围着他所有遵循标准流的子元素（也就是你在最后新加的那个非浮动子元素），而这个子元素的顶部会紧贴在你的ul底部，所以父元素会因此撑开高度。
（CSS浮动原理：如果B元素浮动，上一个元素也是浮动的话，会紧跟其后，除非不够宽才会另起一行；如果上一个元素不是浮动的话，也就是遵循标准流，那么B元素顶部会紧贴上一个元素底部；当然，如果B元素不浮动，是遵循文档流的话，就会默认占一行了）
