浮动清除方法大全及优缺点解析
2015-10-09 09:52
323 查看
对于一个web前端工程师来说浮动清除是我们的必修课,如何精益求精将代码写到极致,小编觉得我们必须花时间多对比、多揣摩。遍搜网络,清除浮动的方法大致有一以下几种方法:
方法1:给父级div定义 高度
代码如下:
原理:给父级DIV定义固定高度(height),能解决父级DIV 无法获取高度得问题。
优点:代码简洁
缺点:高度被固定死了,是适合内容固定不变的模块。(不推荐使用)
方法2:DIV闭合处,加<div class=”clear”></div> (.clear{clear:both})
代码如下:
原理:添加一对空的DIV标签,利用css的clear:both属性清除浮动,让父级DIV能够获取高度。
优点:浏览器支持好
缺点:多出了很多空的DIV标签,如果页面中浮动模块多的话,就会出现很多的空置DIV了,这样感觉视乎不是太令人满意。(不推荐使用)
方法3:结尾处加 br标签<br class=”clear”/> (.clear{clear:both})
代码如下:
原理及有优缺点同方法2,可做了解,亦不推荐使用。
方法4:让父级div 也一并浮起来
这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了,又会产生新的浮动问题。 不推荐使用
方法5:父级div定义 display:table
原理:将div属性强制变成表格
优点:不解
缺点:会产生新的未知问题。(不推荐使用)
方法6父元素设置 overflow:hidden;
原理:通过设置父元素overflow值设置为hidden;在IE6中还需要触发 hasLayout(zoom:1)
优点:代码简介,不存在结构和语义化问题
缺点:无法显示需要溢出的元素(亦不太推荐使用)
方法7父元素设置 overflow:auto;
原理:原理同方法6,在IE6中还需要触发 hasLayout(zoom:1)
优点:代码简介,不存在结构和语义化问题
缺点:firefox早期版本会无故产生focus,多个嵌套后,firefox某些情况会造成内容全选;IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等。
方法8:父级div定义 伪类:after 和 zoom
代码如下:
原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题
优点:结构和语义化完全正确,代码量也适中,可重复利用率(建议定义公共类)
缺点:代码不是非常简洁(极力推荐使用)
本方法进益求精写法
相对于空标签闭合浮动的方法代码似乎还是有些冗余,通过查询发现Unicode字符里有一个“零宽度空格”,也就是U+200B,这个字符本身是不可见的,所以我们完全可以省略掉 visibility:hidden了
.clearfix:after {content:”\200B”; display:block; height:0; clear:both; }
.clearfix { *zoom:1; } 照顾IE6,IE7就可以了
方法1:给父级div定义 高度
代码如下:
<style type=”text/css”> .div1{background:#000;border:1px solid red; /*解决代码*/height:200px;} .div2{background:#f00;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:70%;height:80px;background:#DDD} < /style>
<div class=”div1″> <div class=”left”>我是左浮动</div> <div class=”right”>我是右浮动</div> </div> <div class=”div2″>我是div2</div>
原理:给父级DIV定义固定高度(height),能解决父级DIV 无法获取高度得问题。
优点:代码简洁
缺点:高度被固定死了,是适合内容固定不变的模块。(不推荐使用)
方法2:DIV闭合处,加<div class=”clear”></div> (.clear{clear:both})
代码如下:
<div class=”div1″> <div class=”left”>我是左浮动</div> <div class=”right”>我是右浮动</div> <div class=”clear”></div> </div> <div class=”div2″>我是div2</div>
原理:添加一对空的DIV标签,利用css的clear:both属性清除浮动,让父级DIV能够获取高度。
优点:浏览器支持好
缺点:多出了很多空的DIV标签,如果页面中浮动模块多的话,就会出现很多的空置DIV了,这样感觉视乎不是太令人满意。(不推荐使用)
方法3:结尾处加 br标签<br class=”clear”/> (.clear{clear:both})
代码如下:
<div class=”div1″> <div class=”left”>我是左浮动</div> <div class=”right”>我是右浮动</div> <br class=”clear” /> </div> <div class=”div2″>我是div2</div>
原理及有优缺点同方法2,可做了解,亦不推荐使用。
方法4:让父级div 也一并浮起来
这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了,又会产生新的浮动问题。 不推荐使用
方法5:父级div定义 display:table
原理:将div属性强制变成表格
优点:不解
缺点:会产生新的未知问题。(不推荐使用)
方法6父元素设置 overflow:hidden;
<style type=”text/css”>
.div1{background:#000;border:1px solid red; /*解决代码*/overflow:hidden;zoom:1}
.div2{background:#f00;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:70%;height:80px;background:#DDD}
</style>
<div class=”div1″> <div class=”left”>我是左浮动</div> <div class=”right”>我是右浮动</div> </div> <div class=”div2″>我是div2</div>
原理:通过设置父元素overflow值设置为hidden;在IE6中还需要触发 hasLayout(zoom:1)
优点:代码简介,不存在结构和语义化问题
缺点:无法显示需要溢出的元素(亦不太推荐使用)
方法7父元素设置 overflow:auto;
原理:原理同方法6,在IE6中还需要触发 hasLayout(zoom:1)
优点:代码简介,不存在结构和语义化问题
缺点:firefox早期版本会无故产生focus,多个嵌套后,firefox某些情况会造成内容全选;IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等。
方法8:父级div定义 伪类:after 和 zoom
代码如下:
<style type=”text/css”> .div1{background:#000;border:1px solid red; /*解决代码*/overflow:hidden;zoom:1} .div2{background:#f00;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:70%;height:80px;background:#DDD} .clearfix:after { content: “.”;display: block;height: 0;clear: both;visibility: hidden; } .clearfix {zoom:1;} </style> <div class=”div1 clearfix”> <div class=”left”>我是左浮动</div> <div class=”right”>我是右浮动</div> </div> <div class=”div2″>我是div2</div>
原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题
优点:结构和语义化完全正确,代码量也适中,可重复利用率(建议定义公共类)
缺点:代码不是非常简洁(极力推荐使用)
本方法进益求精写法
相对于空标签闭合浮动的方法代码似乎还是有些冗余,通过查询发现Unicode字符里有一个“零宽度空格”,也就是U+200B,这个字符本身是不可见的,所以我们完全可以省略掉 visibility:hidden了
.clearfix:after {content:”\200B”; display:block; height:0; clear:both; }
.clearfix { *zoom:1; } 照顾IE6,IE7就可以了
相关文章推荐
- mac 不再接受预览版提示
- Spring 实现线程接口 Runnable 注解注入失败 @Resource annotation is not supported on static fields
- 百度关键词排名浮动怎么办?
- Android5.0之后打开开发者选项中的不保留活动,解决方案
- linux在top命令有哪些情况会导致average变大
- 深入讲解Android中Activity launchMode
- Android 优化Fragment防止页面多次inflate
- tomcat定时重启脚本
- springmvc+mybatis 无极限树形结构菜单
- nc显示隐藏字段
- java学习---简介
- 黑马程序员---OC学习笔记之NSDate的介绍和使用
- 编译rnnlib
- matlab_BP
- [转]OBOUT ASP.NET HTML Editor - Insert HTML
- R语言数据处理利器——dplyr简介
- 目前电脑的硬件尺寸参数,计划弄个小一些的ATX机箱
- JAVA JDBC 调用存储过程 传参数
- 怎么停止LogCat的自动滚动?
- APP动效之美需内外兼修