参考链接:https://www.cnblogs.com/yingsu/p/7261904.html

不清楚浮动的结果和影响不再描述,清除浮动的代码别处也有很多,每种方法都有十分简洁的代码,我今天学到的是有伪类来清除浮动。他的原理简单来说就是再已经浮动的元素后面添加一个什么也没有的元素,以此来消除子元素因为浮动而让父元素塌陷的一种解决办法。

代码:

.clearfix:after{#在需要清除浮动的父元素中添加这个clearfix类。
content:".";
display:block;
height:0;
clear:both;
visibility:hidden; }

  

.clearfix:after{
     content:".";        
     display:block;        
     height:0;        
     clear:both;        
     visibility:hidden;

}

CSS 清除浮动 伪类的更多相关文章

  1. css定位 浮动 伪类 margin

    一,margin .标准文档流,margin在竖直方向的不叠加,以较大的为准 .使用margin: auto;的盒子必须有明确的width,并且只有标准文档流的盒子 才能使用margin: auto; ...

  2. css清除浮动大全共8种方法

    原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...

  3. DIV+CSS 清除浮动方法总结

    DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...

  4. CSS清除浮动八种方法

    在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设 ...

  5. css清除浮动的方法汇总

    这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...

  6. 什么是CSS清除浮动?

    在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外 ...

  7. CSS清除浮动各种方法

    当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现 ...

  8. css清除浮动的八大方法

    清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...

  9. css清除浮动float

    css清除浮动float 1.分析HTML代码 <div class="outer"> <div class="div1">1</ ...

随机推荐

  1. 路飞学城Python-Day24

    12.粘包现象 客户端接收的信息指定了的字节,TCP协议没有丢失协议,只是只能接收指定的字节数,于是产生出了粘包现象 服务端接收命令只能接收1024字节,服务端执行命令结果以后传输给客户端,客户端再以 ...

  2. 02操控奴隶——掌握它的语言“Python”

    一 编程常识 1编程语言的发展史 程序员是计算机的主人,主人与奴隶沟通的介质是编程语言,编程语言从诞生到现在它经历了那几个阶段呢? 2 语言的特性: 3 初期的编程语言更多的是站在计算机的角度去设计编 ...

  3. (4)pyspark---dataframe清理

    1.交叉表(crosstab): pandas中也有,常和pivot_table比较. 查看家庭ID与评分的交叉表: 2.处理缺失值:fillna withColumn:新增一列数据 cast : 用 ...

  4. PAT 天梯赛练习集 L2-022. 重排链表

    题目链接:https://www.patest.cn/contests/gplt/L2-022 给定一个单链表 L1→L2→...→Ln-1→Ln,请编写程序将链表重新排列为 Ln→L1→Ln-1→L ...

  5. fflush()函数总结

    1. 概述 函数名: fflush() 功 能: 清除读写缓冲区,需要立即把输出缓冲区的数据进行物理写入时 头文件: stdio.h 原型: int fflush(FILE *stream),其中st ...

  6. [luogu4259 SCOI2003] 严格N元树 (高精 计数dp)

    题目描述 如果一棵树的所有非叶节点都恰好有n个儿子,那么我们称它为严格n元树.如果该树中最底层的节点深度为d(根的深度为0),那么我们称它为一棵深度为d的严格n元树.例如,深度为2的严格2元树有三个, ...

  7. Hash大法

    内容参考<算法竞赛进阶指南> 之前集训的时候听老师讲过,字符串题目中,hash一般不是正解,但是是一个优秀的暴力,可以拿比较多的部分分. hash涉及内容很多,这里只讨论字符串hash 可 ...

  8. Action访问ServletAPI的三种方式

    一.前言 Struts是一种基于MVC设计模式的web应用框架,主要担任C的角色,用于分离页面显示和业务逻辑处理,那其实在我们学习jsp的时候学过一个具有类似功能的东西——servlet.其实Stru ...

  9. ASP.NET-model验证

    在ASP.NET的model中,可以定义下面的这种属性,来实现前台签证字符串 RegularExpression(@"(|.*(?=.{6,})(?=.*\d)(?=.*[a-zA-Z]). ...

  10. 多本Web前端深度修炼书籍(提供网盘下载链接)

    书籍介绍:这本书涵盖了html5新增标签和功能,而且提供了jquerymobile,Phonegap,Sencha Touch框架的介绍和应用,最后还带了一个移动web应用的样例,绝对是移动web开发 ...