本文从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. Effective C++ -----条款02：尽量以const, enum, inline替换 #define

    class GamePlayer{private: static const int NumTurns = 5; int scores[NumTurns]; ...}; 万一你的编译器(错误地)不允许 ...

  2. hiho一下第一周 最长回文子串

    题目链接:http://hihocoder.com/contest/hiho1/problem/1 #include <iostream> #include <cstdio> ...

  3. css实现图片闪光效果

    1.这个效果是看到京东商城上的一个下效果,原本的思路是 用js控制一个图片在某张需要闪光的图片上重复出现,但是 网上找了一些资料,竟然是用css写的,真是太帅了!!! 2.原理:在需要闪光的图片前添加 ...

  4. Class和ClassLoader的getResourceAsStream区别

    这两个方法还是略有区别的, 以前一直不加以区分,直到今天发现要写这样的代码的时候运行 错误, 才把这个问题澄清了一下. 基本上,两个都可以用于从 classpath 里面进行资源读取,  classp ...

  5. Android笔记：限定符

    屏幕特征限定符描述大小 small 提供给小屏幕设备的资源 normal 提供给中等屏幕设备的资源 large 提供给大屏幕设备的资源 xlarge 提供给超大屏幕设备的资源分辨率 ldpi 提供给低 ...

  6. MVC控制下输出图片、javascript与json格式

    /// <summary> /// 输出图片 /// </summary> /// <returns></returns> public ActionR ...

  7. C# 泛型约束

    一.泛型简介1.1泛型通过使用泛型,可以创建这样的类.接口和方法,它们以一种类型安全的工作方式操作各种数据.本质上,术语“泛型”指的是“参数化类型”(parameterized types).参数化类 ...

  8. 阿里云服务器出现Warning: Cannot modify header information - headers already sent by (output started at 问题的解决方法

    阿里云服务器出现Warning: Cannot modify header information - headers already sent by (output started at 问题的解决 ...

  9. Eclipse主题更改

    1. 直接安装color theme eclipse:Help->Install New Software->Work with:Update Site -http://eclipse-c ...

  10. entOS7安装iptables防火墙,试验未通过

    CentOS7默认的防火墙不是iptables,而是firewalle. 安装iptable iptable-service #先检查是否安装了iptables service iptables st ...