参考链接: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. node——npm

    npm 1.npm是nodejs的包管理器 2.npm 有很多代码仓库和代码模块 3.npm有一个npm客户端 4.npm本身也是基于Node.js开发的包 5.npm install npm@lat ...

  2. [Codeforces 626F]Group Projects

    题目大意: 给定\(n\)个数\(a[1]\sim a[n]\),让你把它分为若干个集合,使每个集合内最大值与最小值的差的总和不超过\(K\).问总方案数. 解题思路: 一道很神的dp题. 首先将数进 ...

  3. SpringBoot中打包设置,将配置文件打包在外部

    一.每次用maven的打包工具打包的时候 总是将配置文件一起打包进jar中!配置文件有点小修改就要重新打包很麻烦!!!!为了解决这一麻烦!找 了很多方法,下面的配置已经实现可用 我的项目目录结构如下 ...

  4. Servlet里面一调用Dao里的某个方法

    背景: 这几天,由于项目集成的需要,我要在doFilter里调用dao层里的某些方法,可是总之报空指针,只要调用那个dao方法,就报错误.很是纳闷,网上查找了各种原因,终于让我给突破了,看来还是Jav ...

  5. 记一次在BroadcastReceiver或Service里弹窗的“完美”实践

    事情是这样的,目前在做一个医疗项目,需要定时在某个时间段比如午休时间和晚上让我们的App休眠,那么这个时候在休眠时间段如果用户按了电源键点亮屏幕了,我们就需要弹出一个全屏的窗口去做一个人性化的提示,“ ...

  6. Springmvc Get请求Tomcat、WebLogic中文乱码问题

    Springmvc Get请求Tomcat.WebLogic中文乱码问题 学习了:http://www.cnblogs.com/qingdaofu/p/5633225.html http://www. ...

  7. (hdu step 7.1.6)最大三角形(凸包的应用——在n个点中找到3个点,它们所形成的三角形面积最大)

    题目: 最大三角形 Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  8. oracle刚開始学习的人经常使用操作100问

    oracle刚開始学习的人经常使用操作100问 1. Oracle安装完毕后的初始口令?   internal/oracle sys/change_on_install system/manager ...

  9. jdk1.8Option类

    目的:为了解决一个方法返回的参数可能为空而无法传入到新的方法做参数的问题,java8产生了新的内容:Option. 定义:Option是一个可以为空的容器对象(注意本质上是个万能对象). 常用方法:1 ...

  10. 2)Win10-UWA开发 API參考 - 1

    孙广东  2015.8.23 大多数 Windows 执行时 API 如今适用于 Windows Phone 应用商店应用以及 Windows 应用商店应用,这意味着当你创建同一时候面向 Window ...