清除浮动大总结

转载 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

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

评分:★☆☆☆☆

总结清除浮动方法大全(7种)

1)添加额外标签 这是在学校老师就告诉我们的 一种方法,通过在浮动元素末尾添加一个空的标签例如 ,其他标签br等亦可。 再如: 1)添加额外标签 .main{float:left;} ...
  • u011263845
  • u011263845
  • 2015年04月24日 16:14
  • 985

CSS篇之2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法

2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时候需要清除浮动?我们对元素进行了浮动(float)时,我们的元素就会脱离文档流,像一只小船一样漂流在文档之上。 在 CSS...
  • zengyonglan
  • zengyonglan
  • 2016年11月23日 14:09
  • 3294

CSS清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法

CSS清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法  浮动(float),一个我们即爱又恨的属性。爱,因为通过浮动,我们能很方便地布局; 恨,浮动之后遗留下来太多的问题需要解决,特别...
  • sinat_36533893
  • sinat_36533893
  • 2017年04月08日 14:35
  • 573

html清除浮动的6种方法示例

html清除浮动的6种方法示例 使用display:inline-block会出现的情况: 1.使块元素在一行显示 2.使内嵌支持宽高 3.换行被解析了 4.不设置的时候...
  • webxiaoma
  • webxiaoma
  • 2016年10月08日 16:57
  • 1412

浏览器兼容性经典问题(四) 更好的清除浮动

问题描述:         在你使用css的过程中,多多少少会遇到清除浮动这个问题。         在一个div容器里面,容器中含有一个浮动的div,在浮动元素后面还有一些块元素。如果浮动的高度...
  • speed_feng
  • speed_feng
  • 2012年12月03日 08:51
  • 2006

CSS清除浮动的几种方法

浮动的几个重要性质首先,浮动有几个很重要的性质 脱标:脱离标准文档流 贴边(浮动会紧贴着浮动方向的边 字围(浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动...
  • u011342403
  • u011342403
  • 2017年04月24日 06:49
  • 811

大二上学期学习总结

     一转眼,大二上学期就要过去了。学习数据结构也已经一学期了,贺老师独特的授课方式——翻转课堂也让我收获颇多。       还记得那是暑假,贺老师就开始给我们灌输翻转课堂的概念,一开始很...
  • ap_ple6223
  • ap_ple6223
  • 2015年12月22日 09:52
  • 582

html清除浮动的几种方式

方法一(使用空标签带clear属性)标签可以是div br hr 在浮动元素后使用一个空元素如, 并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用 或来进行清理。 优点...
  • zjbkzj
  • zjbkzj
  • 2017年05月19日 14:52
  • 559

web学习阶段总结(3)大作业小结

对这段时间web学习做一些总结: 期末大作业选择的题目是: 做一个使用Video API的页面程序,要求内容是有关在线视频播放的,video必须是自己录制的。 因为考虑到作业的实用性,我把它完善...
  • yz764127031
  • yz764127031
  • 2017年06月06日 21:46
  • 364

bootstrap清除浮动

http://getbootstrap.com/css/#helper-classes-clearfix 清除浮动 div class="clearfix" http://blo...
  • shiralwz
  • shiralwz
  • 2015年10月23日 17:22
  • 2526
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:清除浮动大总结
举报原因:
原因补充:

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