div+css里的清除和浮动是什么意思?

html-css017

div+css里的清除和浮动是什么意思?,第1张

“清除”就是clear这个属性的中文解释,“浮动”是float这个属性的中文解释。

清除(clear)的意思可以理解为把这个元素指定方向的内容给移走。例如clear:both就是指这个元素左右两边的内容给排除开,相当于这个元素独立成一行,其它元素不管宽度大小,都不能和这个元素并排显示。如果是clear:right;就相当于这个元素右边的内容会被排除开,但是左边的不会,仍然可以在同一行显示。

浮动(float)则是控制元素在一行内的显示位置,例如float:left就表示这个元素会显示在这一行的左边,如果是float:right则表示这个元素会显示在一行的右边。通常情况下,应用了float的元素,浏览器会认为它同时也意味着会与相邻的元素在同一行内显示,但是这个规则在IE6等浏览器里面并不会被严格执行,有时即使定义了float属性,浏览器还是默认认为这个元素是clear:both的,所以一般定义了float之后,还要定义一个display:inline;才可以实现多个元素在同一行内显示的效果。

给footer清除浮动,是为了清除它前面的浮动元素所造成的后续影响,否则的话,它就可能会“钻”到浮动元素的下面去,被浮动元素遮挡住。

而给浮动元素清除浮动那就没啥意义了,清除了那它还能叫浮动元素吗?

多嘴再说一句:浮动元素相当于漂浮在半空中的物体,“地面”上是不保留它的位置的,这样的话后面其他的非浮动的块级元素就可能会占用它本来在“地面”上的位置,这样就会造成“地面”上的物体被“半空”中的物体遮盖住的情况。而给浮动元素后面紧接着的一个非浮动块级元素添加清除浮动属性,就相当于把浮动元素在“地面”上的位置给保留下来,这样后面的元素就不会占用它的位置,这样就能避免被遮盖的情况发生了。

再啰嗦一句:只有非浮动的块级元素会“钻”到浮动元素的下面去,而行内元素却会自动避开浮动元素进行环绕排列,这就是“浮动”相比“定位”的神奇之处,也是很多初学者很难想明白的事情。

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

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