css3父级和子级都浮动了,那还用清除浮动吗?

html-css018

css3父级和子级都浮动了,那还用清除浮动吗?,第1张

浮动主要会影响后面其他的非浮动元素的布局,所以父元素的浮动是必须清除的,子元素也最好清除一下,以免出现一些莫名其妙的现象。

我们可以这么来理解:浮动就像是原本在地面的一幢房子忽然漂浮在空中,这样地面上它原本占用的地皮就要被其他新建的房子占用了(这是未清除浮动的情况),如果这时候出一个硬性规定:这个房子的地皮仍然保留,其他房子不得占用,那么后面的其他房子就不需要挪位置了,所有房子的整体布局就不会发生改变(这就是清除浮动的情况)。

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元素不浮动,是遵循文档流的话,就会默认占一行了)