清除浮动大总结

转载 2013年12月02日 21:39:50

清除浮动 是每一个 web前台设计师 必须掌握的机能。

 

为什么浮动这么难?

因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width height 属性。

而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了。

 

解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题。

 

我根据自己的经验总结8种清除浮动的方法(测试已通过 ie chrome firefox opera,后面三种方法只做了解就可以了):

 

1,父级div定义 height

<style type="text/css"> 

.div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}

.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}

 

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:30%;height:80px;background:#DDD}

</style> 

 

<div class="div1"> 

    <div class="left">Left</div> 

    <div class="right">Right</div> 

</div>

 

<div class="div2">

div2

</div>

原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。

优点:简单,代码少,容易掌握

缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题

建议:不推荐使用,只建议高度固定的布局时使用

评分:★★☆☆☆

 

2,结尾处加空div标签 clear:both

<style type="text/css"> 

.div1{background:#000080;border:1px solid red}

.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}

 

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:30%;height:80px;background:#DDD}

 

/*清除浮动代码*/

.clearfloat{clear:both}

</style> 

 

<div class="div1"> 

    <div class="left">Left</div> 

    <div class="right">Right</div>

<div class="clearfloat"></div>

</div>

 

<div class="div2">

div2

</div>

原理:添加一个空div,利用css提供的clear:both清除浮动,让父级div能自动获取到高度

优点:简单,代码少,浏览器支持好,不容易出现怪问题

缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,增加无用元素,让人感觉很不爽

建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法

评分:★★★☆☆

 

3,父级div定义 伪类:after 和 zoom

<style type="text/css"> 

.div1{background:#000080;border:1px solid red;}

.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}

 

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:30%;height:80px;background:#DDD}

 

/*清除浮动代码*/

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

.clearfloat{zoom:1}

</style> 

 

<div class="div1 clearfloat"> 

    <div class="left">Left</div> 

    <div class="right">Right</div> 

</div>

 

<div class="div2">

div2

</div>

原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题

优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)

缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持。

建议:推荐使用,建议定义公共类,以减少CSS代码。

评分:★★★★☆

 

4,父级div定义 overflow:hidden

<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 class="div1"> 

    <div class="left">Left</div> 

    <div class="right">Right</div>

</div>

 

<div class="div2">

div2

</div>

原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度

优点:简单,代码少,浏览器支持好

缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。

建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

评分:★★★☆☆

 

5,父级div定义 overflow:auto

<style type="text/css"> 

.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto}

.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 class="div1"> 

    <div class="left">Left</div> 

    <div class="right">Right</div>

</div>

 

<div class="div2">

div2

</div>

原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度

优点:简单,代码少,浏览器支持好

缺点:内部宽高超过父级div时,会出现滚动条

建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

评分:★★☆☆☆

 

6,父级div 也一起浮动

<style type="text/css"> 

.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left}

.div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both}

 

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:30%;height:80px;background:#DDD}

</style> 

 

<div class="div1"> 

    <div class="left">Left</div> 

    <div class="right">Right</div>

</div>

 

<div class="div2">

div2

</div>

原理:所有代码一起浮动,就变成了一个整体

优点:没有优点

缺点:会产生新的浮动问题。

建议:不推荐使用,只作了解。

评分:★☆☆☆☆

 

7,父级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 class="div1"> 

    <div class="left">Left</div> 

    <div class="right">Right</div>

</div>

 

<div class="div2">

div2

</div>

原理:将div属性变成表格

优点:没有优点

缺点:会产生新的未知问题。

建议:不推荐使用,只作了解。

评分:★☆☆☆☆

 

8,结尾处加 br标签 clear:both

<style type="text/css"> 

.div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}

.div2{background:#800080;border:1px solid red;height:100px}

 

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:30%;height:80px;background:#DDD}

 

.clearfloat{clear:both}

</style> 

 

<div class="div1"> 

    <div class="left">Left</div> 

    <div class="right">Right</div>

<br class="clearfloat" />

</div>

 

<div class="div2">

div2

</div>

原理:父级div定义zoom:1来解决IE浮动问题,结尾处加 br标签 clear:both

建议:不推荐使用,只作了解。

评分:★☆☆☆☆

相关文章推荐

实用css技巧——清除浮动方法总结

相信不少跟我一样的前端新手在利用float浮动来进行页面的布局和定位时都会遇到这样的问题:一旦当前浮动元素的父级div不设置固定的高度height时,浮动的元素无法将父级div的内容撑开。导致整个页面...

CSS清除浮动方法总结

一、 分析HTML代码结构: 1 2 3 分析CSS代码样式:.outer{border: 1px solid #ccc;background: #fc9;color: ...

css清除浮动float的三种方法总结

摘要 css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一、抛一块问题砖(display: block)先看现象:     分析HTML代码结构:...

css中清除浮动展开父元素的几种方法总结

最近在瀑布流布局的学习中,发现css中浮动会使html元素脱离文档流,导致在浮动元素的父元素无法展开(即其父元素高度为0),后面的元素挤占原本浮动元素在文档流中的位置,造成令人意外的布局...

清除浮动技巧总结

总结一下大家在开发过程中遇到的浮动问题,如何清除浮动的技巧。

清除浮动的各种方法总结

很多人都有研究闭合浮动元素的问题,但是解决方法却不一样,也并不是每一种方法都尽善尽美。闭合浮动元素(或者叫清除浮动)是web标准设计中经常会遇到的一个问题,因此,这里我想总结一下目前经常用到的几种方法...
  • hnyysly
  • hnyysly
  • 2014年06月15日 10:56
  • 287

css清除浮动float的七种常用方法总结和兼容性处理

7、万能清除法 **after伪类** 清浮动(现在**主流**方法,**推荐使用**) ``` 选择符:after{ content:"."; clear:both; ...

css 清除元素的浮动方法总结

css 清除元素的浮动方法总结

总结清除浮动的7种方法

1.给父级加上高度严格说来不能算是清除浮动,不过可以达到同样的布局效果 ...

[css] 清除浮动的方式总结

清除浮动 css的几种应用本Markdown编辑器使用[StackEdit][6]修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:清除浮动大总结
举报原因:
原因补充:

(最多只允许输入30个字)