首页 > 代码库 > 清浮动的九种方式
清浮动的九种方式
1、加高
给父级加高
问题:扩展性不好
2、父级浮动
让父级也浮动
问题:页面中所有元素都加浮动,margin左右自动失效
3、inline-block 清浮动方法:
给父级加display: inline-block;
问题:margin左右自动失效;
4、空标签清浮动
在浮动元素下加
<div class="clear"></div>
.clear{height: 0px;font-size: 0px;clear: both;}
问题:IE6 最小高度 19px;(解决后IE6下还有2px偏差)
5、br清浮动
在浮动元素下加 <br clear="all" />
问题:不符合工作中:结构、样式、行为,三者分离的要求。
6、after伪类 清浮动方法(现在主流方法)
.clear:after{content:‘‘;display:block;clear:both;}
.clear{zoom:1;}
after伪类: 元素内部末尾添加内容;
:after{content"添加的内容";} IE6,7下不兼容
zoom 缩放
a、触发 IE下 haslayout,使元素根据自身内容计算宽高。
b、FirFox 不支持;
7.overflow:hidden 清浮动方法;
给父级加overflow:hidden
问题:需要配合 宽度 或者 zoom 兼容IE6 IE7;
overflow: scroll | auto | hidden;
overflow:hidden;溢出隐藏(裁刀!)
8.position:absolute 清浮动方法
给父级加position:absolute
9.position:fixed 清浮动方法
给父级加position:fixed
清浮动的九种方式