原文链接http://www.jb51.net/css/173023.html

清除浮动是每一个 web前台设计师必须掌握的机能。css清除浮动大全,共8种方法。 

浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 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清除浮动大全共8种方法的更多相关文章

  1. CSS清除浮动大全的8种方法

    清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...

  2. 【转】css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?

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

  3. css清除浮动float的几种方法

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度, ...

  4. css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$(&#39;.float&#39;)

    一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class=&quo ...

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

    原文地址: http://my.oschina.net/leipeng/blog/221125 张大神的解析: http://www.zhangxinxu.com/wordpress/2010/01/ ...

  6. css清除浮动大全,共8种方法

    我看的网页的网址:http://hi.baidu.com/kongcheng2012/item/2b1250d4452e802538f6f705 为什么浮动这么难? 因为浮动会使当前标签产生向上浮的效 ...

  7. CSS围住浮动元素的三种方法

    浮动元素脱离了文档流,其父元素看不到它了,因而不会包围它.浮动会“扩散”到下一个清除浮动的元素处.这会引起不想要的页面布局效果. 清除浮动的方法有三种: 1.父元素overflow:hidden 2. ...

  8. 前端学习笔记之css清除浮动float的七种常用方法总结和兼容性处理

    在清除浮动前我们要了解两个重要的定义: 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来. 高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮 ...

  9. CSS清除浮动八种方法

    在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设 ...

随机推荐

  1. BZOJ 1246 &amp; 有点不一样的概率DP

    题意: 题意够坑的啊... 一个色子有n个面,第k次掷出一个加上这个k.求掷出所有面的期望值. 我一直以为值是色子面上的... 那么问题来了在色子面上怎么做...n还是1w级别... SOL: 对着理 ...

  2. Android性能优化之Systrace工具介绍(一) _&amp;&amp; Systrace生成的trace.html打开空白或者打不开的解决办法

    1.必须用Chrome打开 2.在mac电脑上,可能Chrome打开也是空白,解决办法是:在chrome地址栏中输入”chrome:tracing”,然后点击load按钮load你的trace.htm ...

  3. 树形DP求树的重心 --SGU 134

    令一个点的属性值为:去除这个点以及与这个点相连的所有边后得到的连通分量的节点数的最大值. 则树的重心定义为:一个点,这个点的属性值在所有点中是最小的. SGU 134 即要找出所有的重心,并且找出重心 ...

  4. 二、IRIG_B解码AC信号

    AC-----过零检测(MAX913ESA)---1khzB码信号(以0v为界大于0为高,小于0为低,的 方波信号) AC-----信号放大(TLE2022ID--mv到5v) ---系统电压转换(M ...

  5. 【老司机经验】CC2530&amp;STM8S105二合一嵌入式学习板设计思路与经验分享

    CC2530&STM8S105二合一嵌入式学习板设计思路与经验分享 1.缘起    这些年来一直在其他公司的实验箱和别人的开发板上进行教学与开发工作,总是觉得功能设计不那么合意.心里突然冒出个 ...

  6. 数据存储之Web存储(sessionStorage localStorage globalStorage )

    Web Storage 两个目标 提供一种在cookie之外的存储会话守数据的途径 提供一种存储大量可以跨会话存在的数据机制 最初的Web Storage规范包含两个对象 sessionStorage ...

  7. do while 循环和while循环的区别

    do while 循环和while循环的区别 1.do while循环是先执行循环体,然后判断循环条件,如果为真,则执行下一步循环,否则终止循环:    while循环是先判断循环条件,如果条件为真则 ...

  8. Oracle下载与Oracle安装图解(Oracle19c,Oracle18c,Oracle12c,Oracle11g)

    Oracle下载与Oracle安装图解(Oracle19c,Oracle18c,Oracle12c,Oracle11g) 1.Oracle下载(Oracle11g) oracle下载方法,请根据以下步 ...

  9. 转 多租户SaaS架构

    当使用Techcello框架开发云端多租户SaaS应用程序时,它继承了经过验证和测试的架构蓝图和工程结构.但开发人员仍然会保留灵活性,自由和控制权,以修改和扩展能力以适应其应用要求.此外,SaaS平台 ...

  10. UVA1609-Foul Play(构造+递归)

    Problem UVA1609-Foul Play Accept: 101  Submit: 514Time Limit: 3000 mSec Problem Description Input Fo ...