想要清除浮动就要在父元素上 加上 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. Luogu P2619 [国家集训队2]Tree I 凸优化,wqs二分

    新学的科技.设\(f(x)\)为选\(x\)条白色边的时候的最小生成树权值和,那么可以猜到它应该是一个下凸函数的形式. 如图,图中\(x\)坐标表示选的白色边条数,\(y\)坐标表示获得的权值,那么我 ...

  2. Linux的目录结构与目录管理

    Linux的目录结构与目录管理 Linux目录结构: 目录创建的规则 FHS 文件系统层次化标准 指定了Linux操作系统,哪些目录是一定要具备的 /boot /bin /sbin /etc /sys ...

  3. 电脑右键新建没有xmind文件选项解决方法

    xmind还是方便的. 打开注册表,展开HKEY_CLASSES_ROOT,展开.xmind(如果没有请新建).在里面新建ShellNew项,并展开,在里面新建NullFile这个字符串值. 如果还是 ...

  4. [Usaco2010 Dec]Treasure Chest 藏宝箱

    题目链接:点这里 Solution: 刚开始以为是博弈论,然而不是... 首先考虑n方dp,设f(l,r)为只有\(l\)到\(r\)区间的钱的先手最大获利 那么我们可以得到式子f(l,r)=sum( ...

  5. 解决kaggle邮箱验证不能confirm的问题

    感谢这位博主 https://blog.csdn.net/FrankieHello/article/details/78230533

  6. Ajax异步提交的步骤

    1.创建XHR对象 ,XMLHttpRequest(该对象负责悄悄滴与服务器进行交互): 2.设置响应函数/回调函数(响应函数规定对返回自服务器的信息如何进行处理): 3.通过xmlhttp.open ...

  7. Springboot对Controller层方法进行统一异常处理

    Controller层方法,进行统一异常处理 提供两种不同的方案,如下: 方案1:使用 @@ControllerAdvice (或@RestControllerAdvice), @ExceptionH ...

  8. 虚树总结&题单&简要题解

    简介 虚树,即剔除所有无关结点,只保留询问点和询问点的相关结点(两两之间的LCA),建一棵新树,这棵新树就是虚树.通过虚树,可以有效的减小询问(甚至修改)的复杂度.设询问点的个数是\(k\),那么建虚 ...

  9. Harmonic Number (II)

    Harmonic Number (II)   PDF (English) Statistics Forum Time Limit: 3 second(s) Memory Limit: 32 MB I ...

  10. [LeetCode]-algorithms-Median of Two Sorted Arrays

    There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of the two ...