本文从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. 【leetcode】Rotate Image（middle）

    You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise). ...

  2. sqlserver 导出数据字典

    -- 数据字典 SELECT ( then d.name else '' end)表名, a.colorder 字段序号, a.name 字段名, ( then '√'else '' end) 标识, ...

  3. C#冒泡排序

    C#最简单的冒泡排序,需要的朋友可作参考: 思路: 使用两个for循环,就可以遍历数组,这样就可以确保每个数组元素都被使用 对比前后两个数,将小的数字和大的交换位置,引入一个临时变量temp来进行交换 ...

  4. 数据存储--sqlite总结

    SQLite SQLite(轻量级的数据库,关系型数据库) 辅助工具:Navicat Premium 等 原理:ios针对存储问题封装了sqlite数据库(c语言数据库). 1 app获取沙盒地址命名 ...

  5. STL_advance distance prev next

    template<class InputIterator> typename iterator_traits<InputIterator>::difference_type d ...

  6. NYOJ题目836画图

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsoAAAMbCAIAAADb4SQpAAAgAElEQVR4nO3du1Iq3dYG4H0T5l6IMR

  7. OkHttp学习总结

    This paper mainly includes the following contents okhttp ordinary operation. okhttp interceptors. Re ...

  8. C#回顾 - 2.NET的IO：Path、File、FileInfo、Directory、DirectoryInfo、DriveInfo、FileSystemWatcher

        1.管理文件系统 一般而言,应用程序都会有保存数据.检索数据的需求. 1.1 使用 path 类来访问文件路径 [path常用的方法]:http://www.cnblogs.com/tangg ...

  9. Android源码-学习随笔

    在线代码网站1:http://grepcode.com/project/repository.grepcode.com/java/ext/com.google.android/android/ 书籍: ...

  10. Java并发编程中的阻塞和中断

    >>线程的状态转换 线程的状态转换是线程控制的基础,下面这张图片非常直观的展示了线程的状态转换: 线程间的状态转换: 1. 新建(new):新创建了一个线程对象.2. 可运行(runnab ...