clearfix的定义:

.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的原理: 

1、在IE6, 7下zoom: 1会触发hasLayout,从而使元素闭合内部的浮动。 
2、在标准浏览器下,.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素,从而达到清除浮动的作用。 
3、在需要清除浮动的时候,只要写一个.clearfix就行了,然后在需要清浮动的元素中 添加clearfix类名就好了。 

css中clearfix清除浮动的用法及其原理示例介绍的更多相关文章

  1. css用clearfix清除浮动

    本文从http://www.studyofnet.com/news/196.html复制.   本文导读:写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,在Fire ...

  2. CSS学习系列2 -- CSS中的清除浮动

    CSS中有一个很常见的问题,就是元素的浮动. 那么,到底什么是元素的浮动呢,我们来看一个例子 举个例子,在一个div里面内部有浮动元素的话,这个浮动元素会让这个div的高度塌陷. .myDiv{ ba ...

  3. CSS之clearfix清除浮动

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

  4. css中为了清除浮动经常用到的after样式

    .cf:after { display: block; visibility: hidden; width:; height:; line-height:; font-size:; clear: bo ...

  5. clearfix清除浮动进化史

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

  6. clearfix清除浮动

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

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

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

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

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

  9. css中vertical-align和line-height的用法

    css中vertical-align和line-height的用法 1.先来看一种现象: (1).将一个图片放入一个div块中,div块背景颜色设置为aquamarine.将会发现图片与div块下边沿 ...

随机推荐

  1. ROS学习笔记(一)——软件版本的选择

    下面是Google的SLAM系统Cartographer对系统的要求: Cartographer对ROS版本要求: ROS Indigo 对Ubantu 的版本要求: 所以,综上所述: Ubantu ...

  2. .net(C#)在vs2010版本下的MVC如何才能运行静态页面(html)

    正如,我上篇写的那样,那是在测试下,我所实现的方法,但是作为WEB项目,终究要发布的,故我把发布和切换在这说一下. 据我实测,我在按照我上篇改了Views下的Webconfig文件后,在解决方案下建了 ...

  3. OneProxy自动剔除延迟节点

    在多种情况下,MySQL主从节点之间可能存在延迟.比如,主库的写入能力强于从库的写入能力.从库单线程复制.从库复制出错导致相关进程停止.为了保证数据的时效性,OneProxy提供了复制时效性检查,用于 ...

  4. examine self thrice a day2017

    1.6.2017 葰γí千萬丆γáò絠ィ壬菏鰯嚸,銣惈絠,倁噵ㄖㄅ者β淂簳掉.千澫丕楆被莂亽抓ィ主鰯點,以佌襲撃.那個記駐,吢軟劊嗐死尓垍己ㄖㄅ.絠仒槇可笑,鯟覀者βる誐手裏魢泾吺有談半リ的籌碼,還茬 ...

  5. JavaScript函数定义和调用 变量作用域

     本文是笔者在看廖雪峰老师JavaScript教程时的个人总结   JavaScript中函数定义可以是这样的格式 function 函数名(参数) {     函数体 } 也可以是这样的格式     ...

  6. Unity3D 中的定时器

    不算上 C# 自带的,目前知道两种,以下分别介绍. 1.每帧检查 定义一个时间变量 timer,每帧将此时间减去帧间隔时间 Time.deltaTime,如果小于或者等于零,说明定时器到了,执行相应功 ...

  7. Luogu 魔法学院杯-第二弹(萌新的第一法blog)

    虽然有点久远  还是放一下吧. 传送门:https://www.luogu.org/contest/show?tid=754 第一题  沉迷游戏,伤感情 #include <queue> ...

  8. 20145236 GDB调试汇编堆栈过程分析

    GDB调试汇编堆栈过程分析 首先需要输入sudo apt-get install libc6-dev-i386安装一个库才能产生汇编代码,然后输入gcc - g example.c -o exampl ...

  9. PHP浮点数计算

    涉及到计算 和金额交易 使用bc系列函数 高精度计算 不会有0.57不精确的问题

  10. Android之ViewPager组件实现左右滑动View

    什么是ViewPager VIewPager是安卓3.0之后提供的新特性,继承自ViewGroup,专门用来实现左右滑动切换View的效果.如果想向下兼容需要 android-support-v4.j ...