参考链接: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 115E]Linear Kingdom Races

    题目大意: 有n块地,初始是荒地.你可以把某些荒地开垦(需要花费相应的价值\(a_i\)(正整数)),然后这些荒地就可以种田. 现在有m年,每年要在l到r区间内种田,获得p(正整数)的价值(必须保证l ...

  2. python的装饰器,迭代器用法

    装饰器. 装饰器实际就是一个函数 定义:在不改变内部代码和调用方式的基础上增加新的功能 了解装饰器需要了解3个内容: 1.函数即变量 2.高阶函数 1).把一个函数名当作实参传给另一个函数 2).返回 ...

  3. NOIP2018提高组省一冲奖班模测训练(二)

    比赛链接 NOIP2018提高组省一冲奖班模测训练(二) 今天发挥正常,昨天不在状态…… 花了很久A了第一题 第二题打了30分暴力 第三题投机取巧输出test1答案(连暴力都不知道怎么打,太弱了) 2 ...

  4. [BZOJ1975]HH去散步 图论+矩阵

    ###[BZOJ1975]HH去散步 图论+矩阵 题目大意 要求出在一个m条边,n个点的图中,相邻两次走的边不能相同,求在t时间时从起点A走到终点B的路径方案总数.将答案mod45989 输入格式: ...

  5. oracle间隔分区

    http://blog.csdn.net/rznice/article/details/55048876

  6. spring boot pom

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  7. ACM-ICPC Dhaka Regional 2012 题解

    B: Uva: 12582 - Wedding of Sultan 给定一个字符串(仅由大写字母构成)一个字母表示一个地点,经过这个点或离开这个点都输出这个地点的字母) 问: 每一个地点经过的次数(维 ...

  8. [jzoj 5930] [NOIP2018模拟10.26】山花 解题报告 (质因数分类)

    题目链接: http://172.16.0.132/senior/#contest/show/2538/2 题目: 小S决定从某一个节点$u$开始对其子树中与$u$距离小于$K$的节点代表的花树进行采 ...

  9. scanf正则表达式

    #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> void main() { ] = ...

  10. VC6.0 设置动态链接库工程生成dll以及lib文件的位置

    在"Projet"->"Settings..."的"Link"选项卡中 "Output file name"中设置 ...