本文从http://www.studyofnet.com/news/196.html复制。

 
本文导读：写css 时总为浮动而烦恼，如果用了浮动，浮动的父层不会跟着浮动框的高度增加而增加，在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。这个时候我们可以用clearfix清除浮动

什么是.clearfix

CSS 代码   复制

.clearfix:after {

  content: " ";

  display: block;

  clear: both;

  height: 0;

}

.clearfix {

  zoom: 1;

}



<div class="clearfix">

  <div class="floated"></div>

</div>

上述代码说明：

 
CSS 代码   复制

.clearfix:after {

    content: ".";     /*内容为“.”就是一个英文的句号而已。也可以不写。*/

    display: block;   /*加入的这个元素转换为块级元素。*/

    clear: both;     /*清除左右两边浮动。*/

    visibility: hidden;      /*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；*/

    line-height: 0;    /*行高为0；*/

    height: 0;     /*高度为0；*/

    font-size:0;    /*字体大小为0；*/

}



.clearfix { *zoom:1;}   /*这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。*/

上面的代码就是.clearfix的定义和应用，简单的说下.clearfix的原理：

1、在IE6, 7下zoom: 1会触发hasLayout，从而使元素闭合内部的浮动。

2、在标准浏览器下，.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素，从而达到清除浮动的作用。

3、在需要清除浮动的时候，只要写一个.clearfix就行了，然后在需要清浮动的元素中 添加clearfix类名就好了。

实例：

 
HTML 代码   复制

<html >


<head>


<title> css用clearfix清除浮动实例</title>


<meta name="generator" content="editplus" />


<meta name="author" content="" />


<meta name="keywords" content="" />


<meta name="description" content="" />


</head>


<body>


<style type="text/css">

/*所有主流浏览器都支持 :after 伪元素。*/

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}

.clearfix{*+height:1%;}/*不知道有什么用处，不加ie7也没有问题*/

.box{ background:#111;width:500px; position:relative;}

.l{float:left; background:#333;width:200px; height:100px;}

.r{float:right;background:#666;width:200px; height:200px;}

.s{width:100px; height:100px;background:#999;position:absolute;right:-50px;;}

</style>

<div class="box clearfix">

<div class="l">left</div>

<div class="r">right</div>

<div class="s">absolute</div>

</div>

</body>

</html>

css用clearfix清除浮动的更多相关文章

  1. css中clearfix清除浮动的用法及其原理示例介绍

    clearfix的定义: .clearfix:after {}{ content: "."; /**//*内容为“.”就是一个英文的句号而已.也可以不写.*/ display: b ...

  2. CSS之clearfix清除浮动

    .clear { clear: both; height: 0; overflow: hidden; display: block; line-height: 0 }   .clearfix:afte ...

  3. [笔记]使用clearfix清除浮动

    转载自奶牛博客 .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; line-height: 0; ...

  4. clearfix清除浮动进化史

    我想大家在写CSS的时候应该都对清除浮动的用法深有体会,今天我们就还讨论下clearfix的进化史吧. clearfix清除浮动 首先在很多很多年以前我们常用的清除浮动是这样的. .clear{cle ...

  5. clearfix清除浮动

    首先在很多很多年以前我们常用的清除浮动是这样的. 1 .clear{clear:both;line-height:0;} 现在可能还可以在很多老的站点上可以看到这样的代码,相当暴力有效的解决浮动的问题 ...

  6. clear-fix清除浮动的两种写法

    1. [代码]clearfix 清除浮动 .clearfix:after { content: "."; display: block; height: 0; font-size: ...

  7. CSS - clearfix清除浮动

    首先,我们来解释一下为什么要使用 clearfix(清除浮动). 通常我们在写html+css的时候,如果一个父级元素内部的子元素是浮动的(float),那么常会发生父元素不能被子元素正常撑开的情况, ...

  8. CSS知识点：清除浮动

    开场白 我们平时工作中,很容易遇到浮动效果.一个DIV中嵌套多个DIV,左边显示一个DIV,右边显示一个DIV,外层DIV的高度随着内层内容的高度变化.这就是最基本的浮动效果.下图的百度搜索结果就是一 ...

  9. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

随机推荐

  1. linux线程的实现

    首先从OS设计原理上阐明三种线程:内核线程.轻量级进程.用户线程 内核线程 内核线程就是内核的分身,一个分身可以处理一件特定事情.这在处理异步事件如异步IO时特别有用.内核线程的使用是廉价的,唯一使用 ...

  2. 1616 最小集合 51NOD（辗转相处求最大公约数+STL）

    1616 最小集合 基准时间限制:1 秒 空间限制:131072 KB 分值: 80 难度:5级算法题  收藏  关注 A君有一个集合. 这个集合有个神奇的性质. 若X,Y属于该集合,那么X与Y的最大 ...

  3. ios NSLayoutConstraint

    为了让我们的应用在不同尺寸的屏幕下都能 “正常”的表示,我们尽量不要把数据写死.大多数可视元素都是一个矩形区域,当然这个矩形区域有坐标的,我们有了这个区域坐标就能确定可视元素的现实位置了.但是ipho ...

  4. [Android Pro] Gradle Tips#1-tasks

    reference to : http://trickyandroid.com/gradle-tip-1-tasks/ http://blog.csdn.net/lzyzsd/article/deta ...

  5. September 25th 2016 Week 40th Sunday

    Everything is good in its season. 万物逢时皆美好. Don't lose hope. Remeber that even a dog has its day. Onc ...

  6. apache ab下载测试

    http://httpd.apache.org/docs/2.0/programs/ab.html-->http://httpd.apache.org/docs/current/platform ...

  7. Mysql Condition /Handler(异常处理)

    关于介绍,可参见:http://www.cnblogs.com/end/archive/2011/04/01/2001946.html. http://blog.csdn.net/rdarda/art ...

  8. Codeforces Round #377 (Div. 2)D(二分)

    题目链接:http://codeforces.com/contest/732/problem/D 题意: 在m天中要考k个课程, 数组a中有m个元素,表示第a[i]表示第i天可以进行哪门考试,若a[i ...

  9. mysql列类型

    mysql三大列类型 整型 tinyint(占据空间:1个字节 存储范围  有符号  -128-127   无符号  0-255) smallint   mediumint    int    big ...

  10. java 缩略图

    http://www.cnblogs.com/digdeep/p/4829471.html http://www.jb51.net/article/57648.htm http://blog.csdn ...