常用:
.clear{clear:both;height:0px;overflow:hidden;}>
最优浮动闭合方案(这是我们推荐的):

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}
用法很简单,在浮动元素的父云素上添加class=”demo clearfix”。

你会发现这个办法也有个弊端,但的确是小问题。改变css写法就ok了:

.demo:after,.demo2:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.demo,.demo2{*+height:1%;}
以上写法就避免了改变html结构,直接用css解决了。

很拉轰的浮动闭合办法:

.clearfix{overflow:auto;_height:1%}
这种办法是我看国外的一篇文章得到的方案,测试了,百试不爽,真的很简单,很给力。喜欢的同学也可以试试这个办法。

这种方法是端友radom提供的,测试通过:

.clearfix{overflow:hidden;_zoom:1;}
感谢radom提供的这种方法!!

PC-常见问题-清除浮动的更多相关文章

  1. 前端布局常见IE6 bug的解决方法,清除浮动的几种方法以及各自的优缺点

    相信有很多前端的朋友再布局的时候经常面对IE6咬牙切齿,尤其是刚刚入行的朋友,在这里给大家一点常见问题的解决方案,希望对大家有所帮助 1)png24位的图片在iE6浏览器上出现背景,解决方案是做成PN ...

  2. CSS清除浮动&内容居中&文字溢出

    学习! 1.CSS清除浮动的方法 (1)添加标签清除浮动: 在浮动元素结尾处,并列的添加标签<div style="clear:both;"></div>. ...

  3. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  4. float---浮动带来的影响与清除浮动带来的影响方法----在路上(20)

    使用float会带来哪些影响: 脱标:无行级块级之分: 相互贴靠:若想之间有空隙可用margin与padding: 顶边对齐: 文字环绕: 当使用float后,子标签脱离父标签,父标签就会失去高度,此 ...

  5. [html/css]清除浮动的相关技巧

    以前只了解得很浅显,转载了一篇不错的文,学习参考 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可 ...

  6. 前端之float的几种清除浮动方式

    前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.float清除方式1 <!DOCTYPE ...

  7. CSS清除浮动float方法总结

    使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...

  8. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  9. css清除浮动深度解析

    首先引入一个新的概念"包裹". float:left会使得该属性的作用容器包裹住其内部元素:那么还有么有其他属性能够产生类似于浮动这种包裹性? 答案是有的:像"浮动&qu ...

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

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

随机推荐

  1. C++ Primer 学习笔记_77_模板与泛型编程 --实例化

    模板与泛型编程 --实例化 引言: 模板是一个蓝图,它本身不是类或函数.编译器使用模板产生指定的类或函数的特定版本号.产生模板的特定类型实例的过程称为实例化. 模板在使用时将进行实例化,类模板在引用实 ...

  2. Windows下文件列举,搜索

    Windows下列举文件用的函数是 FindFirstFile 和 FindNextFile ,另外一个结构体是WIN32_FIND_DATA 以下是MSDN对于WIN32_FIND_DATA的定义 ...

  3. 单片机C语言中标志位的经典应用

    /* 本例程是C语言的位域操作示例 这里为什么位域结构体与联合体一起使用? -->因为这样定义后,即可以单独使用标志位 也可同时使用整个字节数据 主要应用:单片机C语言 好处:用标志位可以节省R ...

  4. compareTo简介

    compareTo()方法是用来比较字符串大小,该方法用来判断一个字符串是大于,等于还是小于另一个字符串.判断字符串大小的依据是根据他们在字典中的顺序决定的 语法 Str1.compareTo(Str ...

  5. Verilog 读写文件

    Verilog 读写文件 在数字设计验证中,有时我们需要大量的数据,这时可以通过文件输入,有时我们需要保存数据,可以通过写文件保存. 读写文件testbench module file_rw_tb() ...

  6. My way to Python - Day04 - 模块

    re模块 什么是正则表达式 正则表达式,英文叫做Regular Expression.简单说,正则表达式就是一组规则,用于实现字符串的查找,匹配,以实现关于字符串的相关操作,比如替换,删除等. 正则表 ...

  7. js 闭包和回调

    原文:http://www.cnblogs.com/yuyuj/p/4525530.html 之前的工作都是基于老大搭建的框架,仿照他写的例子写的请求,很多东东也都做好了封装,只需要了解下直接调用就好 ...

  8. silverlight visifire控件图表制作——silverlight 后台方法画图

    1.调用wcf 获取信息 private void svc_GetSingleChartDataCompleted(object sender, GetSingleChartDataCompleted ...

  9. C#读取USB的一些相关信息

    在USB\VID_05A9&PID_2800\5&1BFE1C47&0&8里面,USB代表设备类型,5&1BFE1C47&0&8代表设备连接位置 ...

  10. [OC笔记] static 关键字

    在变量声明前加上static关键字,可以使局部变量保留多次方法调用所得到的值.当多个方法对一个静态变量进行操作时,多个方法共享同一个静态变量的值.