我们可以这么来理解:浮动就像是原本在地面的一幢房子忽然漂浮在空中,这样地面上它原本占用的地皮就要被其他新建的房子占用了(这是未清除浮动的情况),如果这时候出一个硬性规定:这个房子的地皮仍然保留,其他房子不得占用,那么后面的其他房子就不需要挪位置了,所有房子的整体布局就不会发生改变(这就是清除浮动的情况)。
float属性不具有继承特性,就是说子元素不会继承父元素的浮动属性,详情参考css手册float版本:CSS1
兼容性:IE4+
NS4+
继承性:无
语法:
float
:
none
|
left
|right
参数:
none
:
对象不浮动
left
:
对象浮在左边
right
:
对象浮在右边
说明:
该属性的值指出了对象是否及如何浮动。请参阅clear属性。
当该属性不等于none引起对象浮动时,对象将被视作块对象(block-level),即display属性等于block。也就是说,浮动对象的display特性将被忽略。
三种方法可以解决:1、给父元素(也就是你的.new)加一个overflow:hidden;
2、将父元素也一起浮动(这个比较复杂,会影响到父元素的同级元素);
3、在父元素的最后一个子元素(也就是你的ul标签)后边再增加多一个非浮动的子元素,然后将这个子元素加个clear(例:<div style="clear:both"></div>)
至于第3种方法的原理嘛…是因为父元素一定会包围着他所有遵循标准流的子元素(也就是你在最后新加的那个非浮动子元素),而这个子元素的顶部会紧贴在你的ul底部,所以父元素会因此撑开高度。
(CSS浮动原理:如果B元素浮动,上一个元素也是浮动的话,会紧跟其后,除非不够宽才会另起一行;如果上一个元素不是浮动的话,也就是遵循标准流,那么B元素顶部会紧贴上一个元素底部;当然,如果B元素不浮动,是遵循文档流的话,就会默认占一行了)