想要清除浮动就要在父元素上 加上 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. 使用注解方式实现账户的CRUD

    1 需求和技术要求 1.1 需求 实现账户的CRUD. 1.2 技术要求 使用Spring的IOC实现对象的管理. 使用QueryRunner作为持久层的解决方案. 使用C3p0作为数据源. 2 环境 ...

  2. ZROI 19.08.12模拟赛

    传送门 写在前面:为了保护正睿题目版权,这里不放题面,只写题解. "我发现问题的根源是大家都不会前缀和."--敦爷 A 敦爷spj写错了,差点把蒟蒻swk送走 \(50pts:\) ...

  3. maven 三个仓库表

    https://search.maven.org ,http://www.mvnrepository.com/ http://maven.apache.org

  4. .NET面试题系列(二十)XX

    遍历树.实现造成锁的代码.在线音乐网站 抽象工厂和工厂的区别 简单工厂 : 用来生产同一等级结构中的任意产品.(对于增加新的产品,无能为力) 工厂方法 :用来生产同一等级结构中的固定产品.(支持增加任 ...

  5. nowcoder 79F 小H和圣诞树 换根 DP + 根号分治

    设节点个数大于 $\sqrt n$ 的颜色为关键颜色,那么可以证明关键颜色最多有 $\sqrt n$ 个.对于每个关键颜色,暴力预处理出该颜色到查询中另一个颜色的距离和. 对于不是关键颜色的询问,直接 ...

  6. android 对话框显示工具类

    这个工具类非常简单,但是将显示dialog的方法统一封装,能够大大减少代码重复 package com.ctbri.weather.utils; import android.app.AlertDia ...

  7. [LeetCode]-algorithms-String to Integer (atoi)

    Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input cases. ...

  8. 前端iPhone X适配总结

    屏幕尺寸 垂直方向上,iPhone X的显示宽度与iPhone 6,iPhone 7 和 iPhone 8 的 4.7 英寸一样,但是比4.7英寸的显示屏高145pt. 安全区域 安全区域指的是一个可 ...

  9. springMVC的常用注解有哪些?

    1.@Controller @Controller 用于标记在一个类上,使用它标记的类就是一个SpringMVC Controller 对象.分发处理器将会扫描使用了该注解的类的方法,并检测该方法是否 ...

  10. Oracle开发:常用的数据库字段类型[转]

    Oracle常用的数据库字段类型如下: 字段类型 中文说明 限制条件 其它说明 CHAR 固定长度字符串 最大长度2000 bytes VARCHAR2 可变长度的字符串 最大长度4000 bytes ...