前端浮动

1.清除浮动

方法一:
下一个兄弟元素{clear:both;}. 缺点是要多加个空元素。

方法二:
设置父元素是{display:block; zoom:1; overflow:hidden;}.不需要冗余元素。
实践:父元素包含浮动子元素且未设置高度时,父元素高度将变成0。此时可通过设置父元素float:left;才会有自动高度,但在ie6中当用DD_belatedPNG修复父元素中的png图片时,会导致失效,即图片不显示,此时,父元素用{display:block;zoom: 1;overflow: hidden;}来替换浮动可一举两得。

方法三:
.fix{*zoom:1;}
.fix:after{display:table; content:''; clear:both;}

.fix为浮动元素的父元素。
或者在after里面增加: content: ‘\20’; // “\20” 是什么意思? 它就是空格,\空格的ASCII HEX值。 height: 0;

overflow:hidden:
可以清除浮动挽救高度塌陷,但是什么原理使得这个方法可以做到这一点呢?

或者又是因为浏览器如何渲染才导致clear属性可以清除浮动呢?
这里会知道设置了clear属性的元素会通过自动填满(补足)其上外边距(margin-top)来实现视觉上的清除浮动,所以设置了clear属性来清除浮动的元素,如果对其设置margin-top会不起作用。

那再换个问法,什么情况下margin-top会不起作用呢?
答案又能列出多少条?基础是非常重要的,因为很多时候出现问题,都会发现是自己对基础知识了解不清。这不单单是指CSS元素,我发现80%以上的兼容性问题可以追溯到结构代码写的不规范不标准。错误和冗余的套嵌易导致很多意料外的问题。

发现的误区:
/* 清除浮动3*/
#test{clear:both;}
#test为浮动元素的父元素,其实不是的,设A下有B,#test是B另添加的兄弟元素。