.clear{clear:both;height:0;overflow:hidden;}

上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决基本清浮动问题。

但是这种方法的最大缺陷就是改变了html结构,虽然只是加个div。

最优浮动闭合方案(这是我们推荐的):

.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提供的这种方法!!

转载来源:http://www.daqianduan.com/3606.html

解读浮动闭合最佳方案:clearfix的更多相关文章

  1. 浮动闭合最佳方案:clearfix

    之前给大家介绍两种浮动闭合的办法CSS清除浮动 万能float闭合,得知很多同学都在使用下面的骨灰级解决办法: .clear{clear:both;height:0;overflow:hidden;} ...

  2. clearfix的最佳方案----在路上(22)

    clearfix的纠结 骨灰级解决办法: .clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方加个div.clear或者br.cle ...

  3. inline-block代替浮动布局float:left列表布局最佳方案

    基于各位前辈的辛勤劳动,下面得出使用inline-block替换float:left;的最佳方案. html代码 <div class="list"> <ul&g ...

  4. Android DiskLruCache完全解析,硬盘缓存的最佳方案

    Android DiskLruCache完全解析,硬盘缓存的最佳方案 概述   记得在很早之前,我有写过一篇文章Android高效加载大图.多图解决方案,有效避免程序OOM,这篇文章是翻译自Andro ...

  5. Android 屏幕旋转 处理 AsyncTask 和 ProgressDialog 的最佳方案

    的最佳方案 标签: Android屏幕旋转AsyncTaskProgressDialog 2014-07-19 09:25 39227人阅读 评论(46) 收藏 举报 分类: [android 进阶之 ...

  6. iOS音频AAC视频H264编码 推流最佳方案

    iOS音频AAC视频H264编码 推流最佳方案 项目都是个人的调研与实验,可能很多不好或者不对的地方请多包涵. 1    功能概况 *  实现音视频的数据的采集 *  实现音视频数据的编码,视频编码成 ...

  7. nginx配置pathinfo支持,最佳方案 - chunyu

    〇. 前言 pathinfo有两个,1 pathinfo()函数,2 $_SERVER['PATH_INFO'].pathinfo()是php的库函数,原生支持不需要nginx配置,$_SERVER[ ...

  8. JavaScript 实现命名空间(namespace)的最佳方案——兼容主流的定义类(class)的方法,兼容所有浏览器,支持用JSDuck生成文档

    作者: zyl910 一.缘由 在很多的面向对象编程语言中,我们可以使用命名空间(namespace)来组织代码,避免全局变量污染.命名冲突.遗憾的是,JavaScript中并不提供对命名空间的原生支 ...

  9. JS-封装类或对象的最佳方案

    JS封装类或对象的最佳方案 面向对象强大的优点之一是能够创建自己专用的类或者对象,封装一组属性和行为.抛开性能来说,JS要比面向对象语言如JAVA要灵活好用的多,组装数据结构很灵活方便.那么我们如何来 ...

随机推荐

  1. angularJS——自定义服务provider之$get

    可以认为provider有三个部分: 第一部分是私有变量和私有函数,这些变量和函数会在以后被修改. 第二部分是在app.config函数里可以访问的变量和函数,所以,他们可以在其他地方使用之前被修改. ...

  2. [linux系统]--常用命令

    1.shell实现找到当前目录以及子目录中名字包含king的文件 find ./ | grep king 2.tcpdump抓包参数 -nne分别代表什么意思 -nn:直接以 IP 及 port nu ...

  3. 接触Matlab5年一个总结(Matlab要掌握的一些要点 )

    阅读目录 前言 Matlab的开发环境与简单介绍 Matlab的常见命令 Matlab的灵魂-矩阵操作 Matlab的.m或.fig的编程与技巧 从大二开始接触到matlab,讲真,这是一个我觉得很良 ...

  4. jdbc连接mysql

    package june25jdbcTest; import java.sql.Connection;import java.sql.DriverManager;import java.sql.Res ...

  5. EF之结构进一步优化

    针对之前的使用,做了进一步优化 1.将DAL对象缓存起来 2.仓储类不依赖固定构造的DbContext,执行操作的时候,从线程中动态读取DbContext,这一步也是为了方便将DAL对象缓存起来,解决 ...

  6. JAVA程序操作hbase的Maven配置pom.xml文件

    由于工作需要,用到Java连接Hbase读写数据.原来的方式是直接将依赖的jar包全部下载下来,然后工程里面引用. 现想重构下,改为使用Maven管理,遇到了各种坑,各种不好使,特总结下. <d ...

  7. for循环嵌套的优化

    public static void main(String[] args) {     int x = 0;     for (int i = 0; i < 2; i++) {         ...

  8. linux的三种安装软件包的方式(小白的学习之旅)

    tar包,整个安装过程可以分为以下几步: 1) 取得应用软件:通过下载.购买光盘的方法获得: 2) 解压缩文件:一般tar包,都会再做一次压缩,如gzip.bz2等,所以你需要先解压.如果是最常见的g ...

  9. centos升级glibc(升级到2.14版)

    1.下载源码包 到http://ftp.gnu.org/gnu/glibc/下载glibc-2.14.tar.xz 2.解压 tar glibc-2.14.tar.gz 3.创建build目录 cd ...

  10. php : 基础(3)

    运算符 算术运算符 基础: 符号有:+   -   *   /   % 说明: 他们都是针对数字进行的运算: 如果他们的两边有不是数字的数据,就会(自动)转换为数字: 其中取余运算(取模运算)%,它只 ...