一、代码

html代码
<div class="clearfix"></div> css样式
.clearfix{
zoom:1;/*这个属性是为了兼容IE*/
}
.clearfix:after{
display:block;
content:"";/*设置为空或者“.”都可以*/
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}

二、应用场景

比如一个ul里很多li标签,里面的li标签都设置了左浮动,就可以对ul的伪元素:after进行设置达到清除浮动的目的。

三、兼容性问题

才疏学浅,以后遇到了再补充。

利用伪元素:after清除浮动的更多相关文章

  1. 从知乎首页用户操作入口学习到的CSS技巧 - 合理利用伪元素实现一些装饰样式

    最近在模仿做一个静态的PC版知乎,在模仿的过程中,从知乎工程师的方法中学到了不少知识,比如CSS方面的,以下介绍一个今天学到的伪元素的技巧. 示例 DOM结构为: <div class=&quo ...

  2. 利用伪元素和css3实现鼠标移入下划线向两边展开效果

    一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度从0变成100%达到目的. 二.实现: 1.首先定义一个块状元素(行内元素没有宽高)并修改样式为一个背景色为浅灰色的矩形,设 ...

  3. 转帖 利用伪元素和css3实现鼠标移入下划线向两边展开效果

    原帖地址   https://www.cnblogs.com/yangjunfei/p/6739683.html 感谢分享 一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度 ...

  4. 利用伪元素before实现自定义checkbox样式

     原理:label标签的for属性可以将文字与复选框进行关联,点击文字可以同时将复选框选中. 隐藏checkbox标签,利用label标签的before伪元素来实现自定义样式.设置before伪元素的 ...

  5. 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果

    1.颜色小tip知识 在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色 在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更 ...

  6. [CSS]利用伪元素实现一些特殊图形

    给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS ...

  7. [CSS]利用伪元素实现一些特殊图形 from baidu校招

    最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> ---- ...

  8. 伪类 :after 清除浮动的原理和方法

    浮动元素容器的clearing问题1. 问题的由来有这样一种情形:在一个容器(container)中,有两个浮动的子元素.<div>        <div style=" ...

  9. CSS练习-导航栏斜线分隔-利用伪元素

    开始切第一张图了,第一个遇到的问题是顶部导航栏这里,用斜线分割.想到的思路是用伪类:before或者:after实现 先写html结构. <!-- 导航栏begin --> <div ...

随机推荐

  1. 矩阵取数游戏洛谷p1005

    题目描述 帅帅经常跟同学玩一个矩阵取数游戏:对于一个给定的n*m的矩阵,矩阵中的每个元素aij均为非负整数.游戏规则如下: 1.每次取数时须从每行各取走一个元素,共n个.m次后取完矩阵所有元素: 2. ...

  2. JSON序列化时消除空格

    使用 python 序列化时,通常使用 json.dumps()生成 json,但是会在key和value之间默认给你加上一个空格.传参时可能会应为这个空格导致服务端解析失败. 之前做接口测试时,就遇 ...

  3. SQL基础教程读书笔记-1

    查询基础 2.2 算数运算符和比较运算符 2.2.1算数运算符 + - * / 需要注意NULL 5 + NULL 10 - NULL 1 * NULL 4 / NULL NULL / 9 NULL ...

  4. git以及github的初级入门(一)

    本身学习git的操作是没什么兴趣的,毕竟原本是win平台学的java开发,git下那么多复制的命令行操作确实比较让人头疼,直到昨天我打开计算机的时候,我放置项目的E盘,以及F盘,G盘盘符都不见了!!我 ...

  5. 阿里云服务器部署php的laravel项目,在阿里云买ECS 搭建 Linux+Nginx+Mysql+PHP环境的

    在阿里云买ECS的时候选择自己习惯的镜像系统,我一般都是使用Linux Ubuntu,所以,以下的配置都是在Ubuntu 14.04稳定支持版的环境中搭建Linux+Nginx+Mysql+PHP环境 ...

  6. Android Things 专题6 完整的栗子:运用TensorFlow解析图像

    文| 谷歌开发技术专家 (GDE) 王玉成 (York Wang) 前面絮叨了这么多.好像还没有一个整体的概念.我们怎样写一个完整的代码呢? 如今深度学习非常火,那我们就在Android Things ...

  7. MapReduce编程(一) Intellij Idea配置MapReduce编程环境

    介绍怎样在Intellij Idea中通过创建mavenproject配置MapReduce的编程环境. 一.软件环境 我使用的软件版本号例如以下: Intellij Idea 2017.1 Mave ...

  8. poj 3168 Barn Expansion 几何yy

    题链:http://poj.org/problem? id=3168 Barn Expansion Time Limit: 1000MS   Memory Limit: 65536K Total Su ...

  9. hbase 0.98.1集群安装

    本文将基于hbase 0.98.1解说其在linux集群上的安装方法,并对一些重要的设置项进行解释,本文原文链接:http://blog.csdn.net/bluishglc/article/deta ...

  10. UVA - 11396 Claw Decomposition(二分图染色)

    题目大意:给你一张无向图,每一个点的度数都是3. 你的任务是推断是否能把它分解成若干个爪(每条边仅仅能属于一个爪) 解题思路:二分图染色裸题.能够得出:爪的中心点和旁边的三个点的颜色是不一样的 #in ...