想要清除浮动就要在父元素上 加上 clearfix:after

.clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容;
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的元素可以清除浮动来包裹内部元素。具体意思的话,不用深究,听说微软的工程师自己都无法解释清楚。height:1%效果也是一样。

clearfix:after 的用法的更多相关文章

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

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

  2. clearfix的最佳方案----在路上(22)

    clearfix的纠结 骨灰级解决办法: .clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方加个div.clear或者br.cle ...

  3. 解读浮动闭合最佳方案:clearfix

    .clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决基本清浮动问题. ...

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

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

  5. 浮动闭合最佳方案:clearfix

    之前给大家介绍两种浮动闭合的办法CSS清除浮动 万能float闭合,得知很多同学都在使用下面的骨灰级解决办法: .clear{clear:both;height:0;overflow:hidden;} ...

  6. PC-常见问题-清除浮动

    常用:.clear{clear:both;height:0px;overflow:hidden;}>最优浮动闭合方案(这是我们推荐的): .clearfix:after{content:&quo ...

  7. 【css】清除浮动(clearfix 和 clear)的用法

    本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋.关于 clearfix 和 clear 的样式在这里我就不写了,具体样式点击此处. 下面就 ...

  8. clearfix的用法(转)

    clearfix的用法 (2013-12-31 10:41:24) 标签: clearfix 清除浮动 clearboth height zoom 分类: 网页制作 如果有一个DIV作为外部容器,内部 ...

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

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

随机推荐

  1. xz 解压缩命令,老是忘记

    .tar.xz的解压命令 $ xz -d ***.tar.xz $ tar -xvf ***.tar 或者 $ tar xvJf ***.tar.xz

  2. CentOS升级乱七八糟问题解决

    ----------------------------------------------------------------- Error: Package: libgpod--.el7.x86_ ...

  3. day_05 if条件判断和while循环作业题

    1. 输入姑娘的年龄后,进行以下判断: 1. 如果姑娘小于18岁,打印“不接受未成年” 2. 如果姑娘大于18岁小于25岁,打印“心动表白” 3. 如果姑娘大于25岁小于45岁,打印“阿姨好” 4. ...

  4. MyEclipse更改项目名web发布名字不改问题

    步骤: 右键项目-->选择propertis-->MyEclipse-->Project Facets-->Web-->右侧更改Web Context-root 如下图:

  5. Python 列表(List)Ⅰ

    Python 列表(List) 序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. Python有6个序列的内置类型 ...

  6. Java面试之基础篇(5)

    41.a.hashCode() 有什么用?与 a.equals(b) 有什么关系?        hashCode() 方法对应对象整型的 hash 值.它常用于基于 hash 的集合类,如 Hash ...

  7. codevs 1020 孪生蜘蛛 x

    题目描述 Description 在G城保卫战中,超级孪生蜘蛛Phantom001和Phantom002作为第三层防卫被派往守护内城南端一带极为隐秘的通道. 根据防护中心的消息,敌方已经有一只特种飞蛾 ...

  8. shell实现统计浏览次数并将结果保存到文件中

    日志文件是每日一个.统计日志文件中的关键字,获取每日浏览次数.将次数保存到txt文件中.. 将日期也一并保存到txt文件中. 输入开始日期和结束日期,就可以统计出每日的次数 代码如下: #!/bin/ ...

  9. 极验验证码在php5.6.27下不显示

    PHP5.6需要改php.ini 去掉;always_populate_raw_post_data = -1的 :

  10. Redis配置文件全解

    基本配置 port 6379  # 监听端口号,默认为 6379,如果你设为 0 ,redis 将不在 socket 上监听任何客户端连接. daemonize no #是否以后台进程启动 datab ...