css清除浮动方法及优缺点解析_蓝戒的博客


css清除浮动方法及优缺点解析

清除浮动

清除浮动

清除浮动是web前端工程师的必修课,下面就清除浮动的方法进行归纳整理及优缺点分析

方法一: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了,这样感觉视乎不是太令人满意。(不推荐使用)

方法二:结尾处加 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>

原理及有优缺点同方法1,可做了解,亦不推荐使用。

方法三:父元素设置 overflow:hidden;zoom:1
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}

.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div>
<div>Left</div>
<div>Right</div>
</div>
<div>
div2
</div>
原理:通过设置父元素overflow值设置为hidden;在IE6中还需要触发 hasLayout(zoom:1)
优点:代码简介,不存在结构和语义化问题
缺点:无法显示需要溢出的元素(亦不太推荐使用)

方法四:父元素设置 overflow:hidden;zoom:1
原理:原理同方法6,在IE6中还需要触发 hasLayout(zoom:1)
优点:代码简介,不存在结构和语义化问题
缺点:firefox早期版本会无故产生focus,多个嵌套后,firefox某些情况会造成内容全选;IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等。

方法五:给父级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 无法获取高度得问题。
优点:代码简洁
缺点:高度被固定死了,是适合内容固定不变的模块。(不推荐使用)

方法六:父级div定义display:table
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;}

.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div>
<div>Left</div>
<div>Right</div>
</div>
<div>
div2
</div>
原理:将div属性强制变成表格
优点:无
缺点:会产生新的未知问题。(不推荐使用)

方法七:让父级div 也一并浮起来
这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了,又会产生新的浮动问题。 不推荐使用

方法八:父级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浮动问题
优点:结构和语义化完全正确,代码量也适中,可重复利用率(建议定义公共类)
缺点:代码不是非常简洁(极力推荐使用)

本文固定链接: http://www.webzsky.com/?p=386 | 蓝戒的博客

cywcd
该日志由 cywcd 于2015年04月03日发表在 css, 网页兼容性 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: css清除浮动方法及优缺点解析 | 蓝戒的博客

css清除浮动方法及优缺点解析:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter
来自的朋友,欢迎您 点击这里 订阅我的博客 o(∩_∩)o~~~
×