清除浮动的总结,还是blueprint framework的方法好使!
在清除浮动有多种方法:
1)添加额外的标签
2)让包含该浮动标签的父标签也浮动
缺点:会引起新的问题
3)设置该浮动标签的overvflow的值为auto或hidden。
缺点:不适合所有情况
4)那就是采用blueprint framework的清除方法,主要和伪类:after相结合
其写法如下:
对IE则需要Hack,如下:
无明显缺点,但关键是客户端浏览器要允许运行脚本功能。
大部项目中使用的是1、4方法。
如新浪如下:
代码
1)添加额外的标签
.clear{clear:both;}
<div class="clear"></div>
2)让包含该浮动标签的父标签也浮动
缺点:会引起新的问题
3)设置该浮动标签的overvflow的值为auto或hidden。
缺点:不适合所有情况
4)那就是采用blueprint framework的清除方法,主要和伪类:after相结合
其写法如下:
clearfix:after{content:"\0020";clear:both;display:block;height:0;visibility:hidden;overflow:hidden;}
clearfix{display:block;}
clearfix{display:block;}
对IE则需要Hack,如下:
.clearfix{display:inline-block;}
* html .clearfix{height:1%;}
* html .clearfix{height:1%;}
无明显缺点,但关键是客户端浏览器要允许运行脚本功能。
大部项目中使用的是1、4方法。
如新浪如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* == clearfix == */.clearfix:after { /*/*/ content: "."; /* IE8 hack */ display: block; height: 0; clear: both; visibility: hidden; }
/* IE7 hack */.clearfix { display: inline-block; }
/* IE-mac, IE5, IE6 */* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* IE7 hack */.clearfix { display: inline-block; }
/* IE-mac, IE5, IE6 */* html .clearfix { height: 1%; }
.clearfix { display: block; }