参考链接: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. Codeforces Round #493 (Div. 1) B. Roman Digits 打表找规律

    题意: 我们在研究罗马数字.罗马数字只有4个字符,I,V,X,L分别代表1,5,10,100.一个罗马数字的值为该数字包含的字符代表数字的和,而与字符的顺序无关.例如XXXV=35,IXI=12. 现 ...

  2. 从0实现一个React,个人总结

    原文: https://github.com/hujiulong/blog/issues/4 个人总结:: 一.JSX和虚拟DOM import React from 'react'; import ...

  3. [USACO 2009 Feb Gold] Fair Shuttle (贪心+优先队列)

    题目大意:有N个站点的轻轨站,有一个容量为C的列车起点在1号站点,终点在N号站点,有K组牛群,每组数量为Mi(1≤Mi≤N),行程起点和终点分别为Si和Ei(1≤Si<Ei≤N).计算最多有多少 ...

  4. 20130910.Windows上安装和配置MongoDB

    官方文档:http://docs.mongodb.org/manual/tutorial/ 1.下载软件 http://www.mongodb.org/downloads 2.解压 解压后进入bin目 ...

  5. 前端和后台对接时对sign加密方法

    前端和后台对接时对sign加密方法 /*后台php对接进行sign标签加密 1 获取向后台请求的数据data(key/value方式),可以是个对象(obj),也可以是数组(arr); 2 将数据的k ...

  6. HTML5与后台服务器的数据流动问题

    编辑中,尚未完稿...2017.7.14 1345 很多前端开发出来的HTML5可能对于后台开发者来说,并不是很清楚,也许像我一样一知半解.而且真的让人很糊涂的地方就是前端的JS如何与后端的数据库进行 ...

  7. Spring Cloud Feign 出现ClassNotFoundException: feign.Feign$Builder错误

    Spring Cloud Feign 出现ClassNotFoundException: feign.Feign$Builder错误 后来发现是POM文件写错了,修改为正确的pom,就可以了: POM ...

  8. Webstorm快捷键整理

    Webstorm快捷键整理 F2/Shift F2  下一个/上一个高亮错误 Ctrl+Shift+BackSpace 回到刚刚编辑的地方 Alt+Insert 新建文件,还有其他功能 Ctrl+D ...

  9. Could not connect to SMTP host: localhost, port: 25;

    1.错误描写叙述 DEBUG: setDebug: JavaMail version 1.3.3 DEBUG: getProvider() returning javax.mail.Provider[ ...

  10. C++11新特性应用--介绍几个新增的便利算法(用于分区的几个算法)

    今天继续. C++11新增的关于Non-modifying sequence operations和Modifying sequence operations的算法已经写了.具体信息见之前的博客. 以 ...