参考链接: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. 1、Attention_based Group recommendation——基于注意力机制的群组推荐

    1.摘要: 本文将Attention-based模型和BPR模型结合对给定的群组进行推荐项目列表. 2.算法思想: 如图: attention-based model:[以下仅计算一个群组的偏好,多个 ...

  2. JavaScript:理解执行环境、作用域链和活动对象

    作用域的原理,对JS将如何解析标识符做出了解答.而作用域的形成与执行环境和活动对象紧密相关. 我们对于JS标识符解析的判断,存在一个常见误区 首先,看一个关于JS标识符解析的问题 ,源于风雪之隅提出的 ...

  3. HDU 2078 选课时间( 水题 )

    链接:传送门 思路:水题略 /************************************************************************* > File N ...

  4. 【Tool】 深度学习常用工具

    1. caffe 网络结构可视化 http://ethereon.github.io/netscope/quickstart.html 将网络结构复制粘贴到左侧的编辑框,按Shift+Enter就可以 ...

  5. url中jsessionid的理解

    (1) 这是一个保险措施 因为Session默认是需要Cookie支持的 但有些客户浏览器是关闭Cookie的 这个时候就需要在URL中指定服务器上的session标识,也就是5F4771183629 ...

  6. 【codeforces 746G】New Roads

    [题目链接]:http://codeforces.com/problemset/problem/746/G [题意] 给你3个数字n,t,k; 分别表示一棵树有n个点; 这棵树的深度t,以及叶子节点的 ...

  7. ASP.NET-HTTP响应标头

    Reponse Headers 理论上所有的响应头信息都应该是回应请求头的.但是服务端为了效率,安全,还有其他方面的考虑,会添加相对应的响应头信息,从上图可以看到: Cache-Control:mus ...

  8. Android Java 程序员必备开发工具

    对于Java,有两种截然不同的观点:一种认为Java是最简单功能最强大的编程语言之一,另一种则表示这种编程语言既难用又复杂. 下面这些工具或许功能和作用不同,但是有着一个共同的主旨,那就是——它们都是 ...

  9. Qt程序打包成exe可执行文件

    很多Qt爱好者想发布自己的Qt软件,但却发现在其他没有安装Qt SDK的机器上无法运行,这就是本文想要说明的问题.现在网上大部分软件都要发布自己开发的应用程序,都会打包到exe文件中,待安装完exe文 ...

  10. vue2 router中的 @ 符号表示src

    vue2 router中的 @ 符号表示src 学习了:https://segmentfault.com/q/1010000009549802 这个是webpack起的别名: 在build/webpa ...