浮动闭合最佳方案:clearfix
之前给大家介绍两种浮动闭合的办法CSS清除浮动 万能float闭合,得知很多同学都在使用下面的骨灰级解决办法:
.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提供的这种方法!!
如果这篇文章对您有帮助,您可以打赏我

技术交流QQ群:15129679
浮动闭合最佳方案:clearfix的更多相关文章
- 解读浮动闭合最佳方案:clearfix
.clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决基本清浮动问题. ...
- clearfix的最佳方案----在路上(22)
clearfix的纠结 骨灰级解决办法: .clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方加个div.clear或者br.cle ...
- inline-block代替浮动布局float:left列表布局最佳方案
基于各位前辈的辛勤劳动,下面得出使用inline-block替换float:left;的最佳方案. html代码 <div class="list"> <ul&g ...
- Android 屏幕旋转 处理 AsyncTask 和 ProgressDialog 的最佳方案
的最佳方案 标签: Android屏幕旋转AsyncTaskProgressDialog 2014-07-19 09:25 39227人阅读 评论(46) 收藏 举报 分类: [android 进阶之 ...
- iOS音频AAC视频H264编码 推流最佳方案
iOS音频AAC视频H264编码 推流最佳方案 项目都是个人的调研与实验,可能很多不好或者不对的地方请多包涵. 1 功能概况 * 实现音视频的数据的采集 * 实现音视频数据的编码,视频编码成 ...
- nginx配置pathinfo支持,最佳方案 - chunyu
〇. 前言 pathinfo有两个,1 pathinfo()函数,2 $_SERVER['PATH_INFO'].pathinfo()是php的库函数,原生支持不需要nginx配置,$_SERVER[ ...
- JavaScript 实现命名空间(namespace)的最佳方案——兼容主流的定义类(class)的方法,兼容所有浏览器,支持用JSDuck生成文档
作者: zyl910 一.缘由 在很多的面向对象编程语言中,我们可以使用命名空间(namespace)来组织代码,避免全局变量污染.命名冲突.遗憾的是,JavaScript中并不提供对命名空间的原生支 ...
- JS-封装类或对象的最佳方案
JS封装类或对象的最佳方案 面向对象强大的优点之一是能够创建自己专用的类或者对象,封装一组属性和行为.抛开性能来说,JS要比面向对象语言如JAVA要灵活好用的多,组装数据结构很灵活方便.那么我们如何来 ...
- Python开发【笔记】:加锁的最佳方案
避开死锁 代码程序中,尽量要避免死锁的产生,下面分析常见的线程锁使用方式 :注:只有同一把锁才会产生互斥 1.常见的死锁方式(加锁时程序报错,锁未释放): import time import thr ...
随机推荐
- linux 内核升级 转
inux 内核升级 2011-03-25 23:13:28 分类: LINUX 因要测试一些软件,需要2.6.30以上的内核,安装好CentOS 5.5,内核是2.6.18-194.el5.这次的升级 ...
- A look at WeChat security
原文地址:http://blog.emaze.net/2013/09/a-look-at-wechat-security.html TL;DR: Any (unprivileged) applicat ...
- C#输出到Release VS中Release模式下生成去掉生成pdb文件
Release 与 Debug 的区别就不多说了, 简单来说 Release 优化过, 性能高一些. Debug 为方便调试. 默认情况下是 Debug, 那如何改成 Release 呢? 项目上右键 ...
- arcgispro 计算字段示例
计算字段示例 round(!Shape.area!,1) 使用键盘输入值并不是编辑表中值的唯一方式.在某些情况下,为了设置字段值,可能要对单条记录甚至是所有记录执行数学计算.您可以对所有记录或选中记录 ...
- 绝命毒师第一季/全集Breaking Bad迅雷下载
本季Breaking Bad Season 1(2008)看点:新墨西哥州的高中化学老师沃尔特·H·怀特(布莱恩·科兰斯顿 Bryan Cranston 饰)是拮据家庭的唯一经济来源.他大半生安分守己 ...
- 绝望的主妇第一二三季/Desperate Housewives迅雷下载
绝望主妇 第一二三季 Desperate Housewives Season 1 2 3(2004 2005 2006) 本季看点:在紫藤街上住着这样一群主妇:拥有四个孩子和一个如孩子一般的丈夫的女强 ...
- itunes connect 沙盒帐号地区的问题导致无法进行充值
项目代理给台湾发行,版本由项目提交appstore,台湾合作伙伴会进行测试.这里遇到一个问题,就是沙盒帐号测试的时候死活提示充值失败,不走正常的充值流程. 后来我分析了原因,主要是由于帐号的App S ...
- UVA 1508 - Equipment 状态压缩 枚举子集 dfs
UVA 1508 - Equipment 状态压缩 枚举子集 dfs ACM 题目地址:option=com_onlinejudge&Itemid=8&category=457& ...
- 用ImageSwitcher实现显示图片(更改图片时有动画效果)
ImageView和ImageSwitcher都是用来显示图片的.只不过后者在更新显示的图片的时候可以有动画效果. 注意点: 1.ImageSwitcher初始化需要定义一个ViewFactory,该 ...
- 在Redhat 7.3中采用离线方式安装Docker
本文环境 Redhat Linux 7.3.Docker 18. 写在前面 Docker CE默认是不支持Redhat的,如果你想在Redhat安装,可以使用静态二进制包.这是我多次尝试RPM后得出的 ...