浮动的清除
浮动的性质: 脱标 贴边 字围 收缩
-
给浮动的元素的祖先元素加高度（不常用）
如果一个元素要浮动，那么它的祖先元素一定要有高度。高度的盒子，才能关住浮动。
clear:both
cleat就是清除，both指的是左右浮动都要清除。
缺点：margin失效-
隔墙法
在两个浮动的元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追其那面的浮动元素。<div> <p></p> <p></p> </div> <div class="cl h10"></div> <div> <p></p> <p></p> </div>
缺点:第一个div还是没有高度
-
内墙法
<div> <p></p> <p></p> <div class="cl h10"></div> </div> <div> <p></p> <p></p> </div>优点: 不仅能够使后部分的p不去追前面的p,并且能让第一个div撑出高度.
overflow:hidden
一个父亲,不能被自己的浮动的儿子撑出高度.但是,如果给这个父亲加上了overflow:hidden;那么这个父亲就能够被浮动的儿子撑出高度.这个现象,不能解释.就是浏览器的小偏方.
并且它能够让margin 生效.
浏览器兼容问题
- IE6不支持小于12px的盒子,任何小于12px的盒子,在IE6中看都大.
解决办法: 将盒子的字号,设置小(小于盒子的高).比如0px;
height:4px;
_font-size:0px;
IE6专有属性: 只要给css属性之前,加上下划线.
- IE6 不支持用overflow:hidden 来清除浮动
解决办法: 以毒攻毒,追加一条_zoom:1;
完整写法:
overflow:hidden;
_zoom:1;
_zoom:1; 能够触发IE6浏览器的hasLayout机制
