解读浮动闭合最佳方案:clearfix
.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的更多相关文章
- 浮动闭合最佳方案:clearfix
之前给大家介绍两种浮动闭合的办法CSS清除浮动 万能float闭合,得知很多同学都在使用下面的骨灰级解决办法: .clear{clear:both;height:0;overflow:hidden;} ...
- 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 DiskLruCache完全解析,硬盘缓存的最佳方案
Android DiskLruCache完全解析,硬盘缓存的最佳方案 概述 记得在很早之前,我有写过一篇文章Android高效加载大图.多图解决方案,有效避免程序OOM,这篇文章是翻译自Andro ...
- 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要灵活好用的多,组装数据结构很灵活方便.那么我们如何来 ...
随机推荐
- OJ生成器(一)制作Online Judge前的准备和策划
我这校区新的微机老师斗志昂扬,准备让我们这学校萎靡的信息技术竞赛重振雄风.然后有一次我半开玩笑地说建一个自己的OJ吧,老师也就鼓励我去做了. 开什么玩笑……!我可是马上要参加NOIP的人! 于是老师说 ...
- SOSO街景地图 API (Javascript)开发教程(1)- 街景
SOSO街景地图 Javascript API 干什么用的? 你想在网页里嵌入个地图,就需要它了! 另外,它还支持:地点搜索.周边/附近查询.地图标注.公交/驾车路线规划.地理坐标与地址相互转换.地理 ...
- USB驱动开发大全【转】
本文转载自:http://www.360doc.com/content/12/0504/19/8363527_208666082.shtml 编写USB驱动程序步骤:1所有usb驱动都必须创建主要结构 ...
- angularJS——模块
一.在讲angularjs的模块之前,我们先介绍一下angular的一些知识点: AngularJS是纯客户端技术,完全用Javascript编写的.它使用的是网页开发的常规技术(HTML,CSS,J ...
- Hibernate 基础配置及常用功能(三)
本章重点讲述Hibernate对象的三种状态以及如何配置二级缓存 有关Hibernate的三种状态如何相互转换网上都能查到,官方文档描述的也比较详细.这里主要是针对几个重点方法做代码演示. 一.状态转 ...
- DNS-3
- java 编译期常量
今天在看书的时候遇到了一个不是很懂的名词,是在think in java 这本书的第七章讲final关键字时讲到的.然后自己在网上查了一下知道了一些. 编译器常量就是:它的值在编译期就可以确定的常量. ...
- PostgreSQL的OGG -- bucardo
bucardo是PostgreSQL数据库中实现双向同步的软件,可以实现PostgreSQL数据库的双master的方案,不过bucardo中的同步都是异步的,它是通过触发器记录变化,程序是perl写 ...
- CURL命令详解
curl命令是一个强大的网络工具,它能通过http,ftp等方式下载.上传文件.其中curl远不止这些功能,大家可以通过阅读手册获取更多的信息,类似的工具还有wget. curl命令使用了libcur ...
- (转)sqlplus中文显示乱码的问题
sqlplus中文显示乱码的问题 2010-07-19 11:33:26 分类: LINUX 在windows下sqlplus完全正常,可是到linux下,sqlplus中文显示就出问题了,总是显示“ ...