css用clearfix清除浮动

更多2013/11/4 来源：css学习浏览量：11901
学习标签： css clearfix
本文导读：写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>

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

  1. Clearing Floats清除浮动--clearfix的不同方法的使用概述

    清除浮动早已是一个前端开发人员必学的一课.毫无疑问,多年来,我们已经接触过多种清除浮动的方法,现在“clearfix methods”越来越被大家熟知.在深入剖析“clearfix”的多种用法之前,我 ...

  2. css清除浮动clearfix:after的用法详解

    如果外部有一个div容器,其内部div容器设置了float样式,则外部的容器div因为内部没有clear,导致不能撑开.解决方法:  CSS代码: 复制代码 代码如下: .clearfix:after ...

  3. 清除浮动 .clearfix

    子元素的浮动 清除子元素的浮动 .clearfix{zoom:1}/*IE 6-8*/.clearfix:after{content:'\20';display:block;height:0;clea ...

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

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

  5. 详解 清除浮动 的多种方式（clearfix）

    说明 本文适合知道HTML 与 CSS基础知识的读者,或者想要了解清除浮动背后原理的读者! 1.什么是浮动 首先我们需要知道定位 元素在页面中的位置就是定位,解决问题之前我们先来了解下几种定位方式 : ...

  6. .clearfix:after(清除浮动)中各个属性及值详细解说

    清除浮动.clearfix:after一词,从事web前端的朋友们对此不会陌生吧,下面为大家介绍的是.clearfix:after中用到的所有属性及值的含义,对此感兴趣的朋友可以参考下哈想,希望对大家 ...

  7. css清除浮动的集中方法

    一:浮动产生的副作用 1.父元素的背景不能显示 2.父元素的边框不能撑开 3.padding和margin失效 二:清除浮动的方法 1.给父元素设置高度:这样可以清除浮动,但是子元素内容高度不固定,这 ...

  8. 浮动、清除浮动、BFC

    一. 浮动 1. 浮动的定义 使元素脱离文档流,按照向左或向右的方向移动,直到它的外边缘碰到包含它的框或另一个浮动框为止. 脱离文档流就是在页面中不占位置了. 左浮动右浮动此处就不再赘述了. 2. 看 ...

  9. 【Web】网页清除浮动的方法

    网页中,经常用浮动的div来布局,但是会出现父元素因为子元素浮动引起内部高度为0的问题,为了解决这个问题,我们需要清除浮动,下面介绍4中清除浮动的方法. 在CSS中,clear属性用户清除浮动,语法: ...

随机推荐

  1. Java之IO流

    目录: 1.文件编码 2.File类 3.RandomAccessFile 4.字节流 5.字符流 6.对象的序列化和反序列化 1.文件编码 1)相关知识点 八进制和十六进制的表示方式:八进制前面加0 ...

  2. 最新Node.js 资源汇总

    Node.js 资源汇总 文档 Node.js 官方文档:http://nodejs.org/api/ Node.js 中文文档:http://nodejs.jsbin.cn/api/ Express ...

  3. TheSixthWeekJavaText

    加密文档 实验要求编写一个算法加密一串英文字串. 设计思想:对于一个字符串,我们可以用String.charAt()方法依次取出其中的字符元素,组成一个字符数组.由于字符可以转化为short类型变量进 ...

  4. PHP编程----猴子选大王

    <?php/** * 猴子选大王 * 17个猴子围成一圈,从某个开始报数1-2-3-1-2-3---报"3"的猴子就被淘汰, * 游戏一直进行到圈内只剩一只猴子它就是猴大王了 ...

  5. perl LWP::UserAgent获取源码与响应

    #!/usr/bin/perl -w use strict; use LWP::UserAgent; my $useragent = new LWP::UserAgent; my $url = 'ht ...

  6. Url有值怎么使用get传值

    原来url有数据 test 我们可以$_GET可以获取出来 一般form表单头用get方式都可以满足大多需求 但有一种情况 url里已经有值的时候 用url就会覆盖原来的值 而数据就会丢失 : 数据又 ...

  7. C#调用托管C++类（DLL）

    毕设是做一个网络摄像头的相关应用.界面用WPF,图像处理部分是OpenCV.没用EmguCV的原因是国内EmguCV的资料相对比较少,EmguCV虽然提供了Winform的控件,在做UI上有一定优势, ...

  8. 【转】母函数（Generating function）详解 — TankyWoo（红色字体为批注）

    母函数(Generating function)详解 - Tanky Woo 在数学中,某个序列的母函数(Generating function,又称生成函数)是一种形式幂级数,其每一项的系数可以提供 ...

  9. java学习初体验之课后习题

    import java.util.Scanner; public class HelloWorld { public static void main(String[] args) { //打印Hel ...

  10. 简单的Android之apk包反编译方法

    网上相关的文章一大堆了,我只是总结下自己的反编译方法和工具 工具下载地址: http://download.csdn.net/detail/zsjangel/7104663 下载上面的三个工具的压缩包 ...