清除浮动的最简写法
作者:yemoo 来源:yemoo博客 发布时间:2009-03-30 15:58:00
元素浮动导致的问题及解决办法大家都应该很熟悉了,举个简单的例子:
以上代码的目的是制作一个简单的横向菜单,但因为对所有的li采用了浮动,导致ul高度丢失,其边框不能包含li元素,解决办法就是对ul子元素清除浮动。
网上很流行的一段清除浮动的代码如下:
.clearfix {height: 1%;}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
对于IE只要使元素拥有Layout属性即可清除浮动,方法有很多,如height:1%,overflow:hidden,zoom:1等,但我们一般应选取尽可能不造成副作用的方式,即最优办法是采用zoom:1的办法。
对于符合标准的浏览器,一般采用CSS的:after伪类为浮动元素后面增加一个清除浮动的元素来实现。上面的代码通过增加一个.号,然后通过clear:both;display:block来清除浮动,然后通过visibility:hidden和height:0来隐藏这个点号。
上面的写法其实并不是最简的,根据我自己的试验及在51js上看到某人的办法后尝试出了一个更简单且兼容所有浏览器的写法:
.clearfix {zoom:1}
.clearfix:after {
content: '\20';
display: block;
clear: both;
}
content:'\20'指定在浮动列表后增加一个空白字符,首先这个字符不可见,无需visibility:hidden来隐藏,其次他没有高度,无需height:0来隐藏其高度。因此这样就大大简化了原来的代码同时也达到了清除浮动的目的。
下面是完整代码:
猜你喜欢
- sql server 全文检索有两种搜索方式,一种是contains,另一种是freetext。前者是包含,类似于 like '%关
- 学习Python过程中,发现没有switch-case,过去写C习惯用Switch/Case语句,官方文档说通过if-elif实现。所以不妨
- 本文实例讲述了原生JS实现Ajax通过POST方式与PHP进行交互的方法。分享给大家供大家参考,具体如下:一、代码conn.php<?
- 前言网上的做法基本都是下面的代码return HttpResponseForbidden()试了一下,效果一般,没有异常页面显示,最终显示的
- 前言:情人节、三八女神节、520、七夕节、圣诞节、元旦、生日、新年、各种纪念日……这些节日,对于
- 本文实例讲述了JavaScript控制输入框中只能输入中文、数字和英文的方法。分享给大家供大家参考,具体如下:1、问题背景:遇到这样一个问题
- 最近越来越多在博客上写些UX相关的内容作为分享,就涉及到跟普通博文不一样的文章建构问题。文章内容固然很重要,但排版、组织也是提高可读性和用户
- List>>> [chr(i) for i in range(97,123)]['a', 'b&#
- 为什么使用生产者消费者模式在线程世界里,生产者就是生产数据的线程,消费者就是消费数据的线程。在多线程开发中,如果生产者处理速度很快,而消费者
- 朴素贝叶斯估计朴素贝叶斯是基于贝叶斯定理与特征条件独立分布假设的分类方法。首先根据特征条件独立的假设学习输入/输出的联合概率分布,然后基于此
- 使用SQL语句从电脑导入图片到数据库的方法,具体代码如下所示:--创建图片表CREATE TABLE W_PIC( ID INT
- 一、导入re库python使用正则表达式要导入re库。import re在re库中。正则表达式通常被用来检索查找、替换那些符合某个模式(规则
- sql 查出一张表中重复的所有记录数据1.表中有id和name 两个字段,查询出name重复的所有数据 select * from xi a
- 针对之前安装mysql的笔记进行了总结,分享给大家。版本:MySQL-5.7.16-winx64平台:Windows 7 x641、进入my
- 不知道用ASP写代码的朋友是不是和我有一样的感受,ASP中最头疼的就是调试程序的时候不方便,我想可能很多朋友都会用这样的方法&ldq
- 栗子:计算斐波那契数列(任一个数都是前两个数之和的数字序列)Python2.7实现代码如下:<strong><span s
- <script type="text/javascript"> //那种方式移动 var choMove =
- Python中编码问题:u'\xe6\x97\xa0\xe5\x90\x8d' 类型的转为utf-8的解决办法相信小伙伴们遇
- 使用Opencv打开笔记本电脑摄像头报错近期要做一个下位机上发图像数据给上位机的任务,调试时自己写了一个客户端获取笔记本电脑的摄像头视频数据
- 图像梯度图像梯度计算的是图像变化的速度。对于图像的边缘部分,其灰度值变化较大,梯度值也较大;相反,对于图像中比较平滑的部分,其灰度值变化较小