• 1、父级div定义height。
  • 2、结尾处加空div标签clear:both。
  • 3、父级div定义伪类:after和zoom。
  • 4、父级div定义overflow:hidden。
  • 5、父级div定义overflow:auto。
  • 6、父级div也浮动,需要定义宽度。
  • 7、父级div定义display:table。
  • 8、结尾处加br标签clear:both。
  • 比较好的是第3种,好多网站都这样用

1,父级div定义 height

原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。 
优点:简单、代码少、容易掌握 
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题 
建议:不推荐使用,只建议高度固定的布局时使用

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

原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度 
优点:简单、代码少、浏览器支持好、不容易出现怪问题 
缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不好 
建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法

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

原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题 
优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等) 
缺点:代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持。 
建议:推荐使用,建议定义公共类,以减少CSS代码。

4,父级div定义 overflow:hidden

原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度 
优点:简单、代码少、浏览器支持好 
缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。 
建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

5,父级div定义 overflow:auto

原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度 
优点:简单、代码少、浏览器支持好 
缺点:内部宽高超过父级div时,会出现滚动条。 
建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

6,父级div 也一起浮动

原理:所有代码一起浮动,就变成了一个整体 
优点:没有优点 
缺点:会产生新的浮动问题。 
建议:不推荐使用,只作了解。

7,父级div定义 display:table

原理:将div属性变成表格 
优点:没有优点 
缺点:会产生新的未知问题。 
建议:不推荐使用,只作了解。

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

原理:父级div定义zoom:1来解决IE浮动问题,结尾处加 br标签 clear:both 
建议:不推荐使用,只作了解。

css清除浮动之天龙8步的更多相关文章

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

    原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...

  2. DIV+CSS 清除浮动方法总结

    DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...

  3. CSS清除浮动八种方法

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

  4. css清除浮动的方法汇总

    这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...

  5. css清除浮动定位造成的异常

    清除浮动是为了解决高度塌陷的问题:内层有好几个div有宽有高,并且选择了浮动定位,但是外层的div却并没有设置宽高.在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动( ...

  6. 【转】CSS清除浮动_清除float浮动

    CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...

  7. 什么是CSS清除浮动?

    在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外 ...

  8. CSS清除浮动的方法

    CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...

  9. css 清除浮动 兼容IE+, FF

    上代码: <!doctype html> <html> <head> <meta charset="utf-8"> <titl ...

随机推荐

  1. java求三角形面积以及周长---封装

    /*时间: 2012-10-08作者: 烟大程序要求: 1.封装一类三角形对象Triangle,该类对象具有三条边的属性, 具有初始化三角形的功能.修改边长的功能.判断三条边能否构成三角形的功能. 求 ...

  2. 【BZOJ3456】轩辕朗的城市规划 EGF+多项式求ln

    我们构造$f(i)$和$g(i)$. 其中$f(x)$表示由$x$个节点构成的无向简单连通图的个数. $g(x)$表示有$x$个节点构成的无向简单图(不要求连通)的个数. 显然,由$x$个节点构成的无 ...

  3. 获取dictionary 值连续相同的索引,

    ; i < ;) { , i]; var rangType = companyScheme[i]; string txtCell = ""; switch (rangType ...

  4. Spring Security构建Rest服务-0701-个性化用户认证流程

    上一篇说了用户认证的基本流程,但是上一篇当访问一个受保护的服务后,如果未认证会调到默认的登录页面,这样是不行的,而且认证成功后,就直接访问了那个服务,如果想要做认证成功后做一些操作,还需要自定义. 个 ...

  5. Linux时间命令

    Linux一般有系统时间和硬件时间之分,date命令是显示和操作系统时间:hwclock用来操作硬件时间(日期).日期和时间很重要,比如错误的日期和时间会导致你不能编译程序. 1 date 用法:   ...

  6. layui框架使用总结

    最近一个后台系统使用layui框架做的,遇到好多坑在这里总结一下. 1.layui的基本使用,下面的在他下面写,其他的事件也要在这个里面写     行内onclick事件是监听不到写在下面这种代码中的 ...

  7. Deep Residual Learning for Image Recognition(残差网络)

    深度在神经网络中有及其重要的作用,但越深的网络越难训练. 随着深度的增加,从训练一开始,梯度消失或梯度爆炸就会阻止收敛,normalized initialization和intermediate n ...

  8. elasticsearch-head的使用

    ealsticsearch只是后端提供各种api,那么怎么直观的使用它呢?elasticsearch-head将是一款专门针对于elasticsearch的客户端工具 elasticsearch-he ...

  9. 为什么有int 和integer

    1.Integer 是对象类型 int是原始类型 适用场合有很大的不同 之所以要把int封装成Integer 型 是因为 很多方法参数就只接收对象类型(Object) 还比如 范型 就只支持 对象类型 ...

  10. [转] ASP.NET MVC 模型绑定的功能和问题

    摘要:本文将与你深入探究 ASP.NET MVC 模型绑定子系统的核心部分,展示模型绑定框架的每一层并提供扩展模型绑定逻辑以满足应用程序需求的各种方法. 同时,你还会看到一些经常被忽视的模型绑定技术, ...