参考链接: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-Day38(第四模块思维导图)

  2. PAT 天梯赛练习集 L2-004. 这是二叉搜索树吗?

    题目链接: https://www.patest.cn/contests/gplt/L2-004 一棵二叉搜索树可被递归地定义为具有下列性质的二叉树:对于任一结点, 其左子树中所有结点的键值小于该结点 ...

  3. vivo输入法 需求分析

    我使用的输入法:vivo输入法 1,用户界面:界面为白色和灰色,整体简洁大方,个人而言外观挺不错.但是不能自定义界面,更改背景图片或是主题. 2,记住用户选择:可记忆上次使用后的键盘方式(26键或是9 ...

  4. 异构关系数据库(Sqlserver与Oracle)之间的数据类型转换参考

    一.Oracle到SqlServer的数据类型的转变 编号 Oracle ToSqlServer SqlServer 1 BINARY_DOUBLE VARCHAR(100) real 2 BINAR ...

  5. 监控myserver计数器

  6. Objective-C 和 Core Foundation 对象相互转换

    iOS同意Objective-C 和 Core Foundation 对象之间能够轻松的转换: CFStringRef aCFString = (CFStringRef)aNSString; NSSt ...

  7. JDBC创建mysql连接池代码

    1.底层实现类(DBConnection) package JDBC.JDBCPool.MyJDBCPool; import java.sql.Connection; import java.sql. ...

  8. 打印全排列和stl::next_permutation

    打印全排列是个有点挑战的编程问题.STL提供了stl::next_permutation完美的攻克了这个问题. 可是,假设不看stl::next_permutation,尝试自己解决,怎么做? 非常自 ...

  9. NOIP2017提高组模拟赛5 (总结)

    NOIP2017提高组模拟赛5 (总结) 第一题 最远 奶牛们想建立一个新的城市.它们想建立一条长度为N (1 <= N <= 1,000,000)的 主线大街,然后建立K条 (2 < ...

  10. 如何编译dotnet core

    1.git clone源码 2.init-tools.cmd 3. Error: DIA SDK is missing at "C:\Program Files (x86)\Microsof ...