一、代码

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. memcache调整value大小限制

    > *事件背景: 当Redis有问题时按预案就会切换到本机memcache,但是我们首页 key:value现 在是1.5M同时memcache item限制是1M,导致首页写入memcache ...

  2. SQL Server Profiler的使用

    最近一个项目,使用微软的Entity Framework的ORM框架的项目,部署到现场后,出现了系统缓慢,多个客户端的内存溢出崩溃的问题. 打开了SQL Server Profiler排查,发现有全表 ...

  3. c++邻接表存储图(无向),并用广度优先和深度优先遍历(实验)

    一开始我是用c写的,后面才发现广搜要用到队列,所以我就直接使用c++的STL队列来写, 因为不想再写多一个队列了.这次实验写了两个多钟,因为要边写边思考,太菜了哈哈. 主要参考<大话数据结构&g ...

  4. [Maven实战](7)坐标

    1. 简单介绍 maven的世界中拥有数量很巨大的构件,也就是平时用的一些jar,war等文件. 在maven为这些构件引入坐标概念之前,我们无法使用不论什么一种方式来唯一标识全部这些构件. 因此,当 ...

  5. 《Deep Learning》译文 第一章 前言(中) 神经网络的变迁与称谓的更迭

    转载请注明出处. 第一章 前言(中) 1.1 本书适合哪些人阅读? 能够说本书的受众目标比較广泛,可是本书可能更适合于例如以下的两类人群.一类是学习过与机器学习相关课程的大学生们(本科生或者研究生). ...

  6. iOS_20_微博OAuth授权_取得用户授权的accessToken

    终于效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcHJlX2VtaW5lbnQ=/font/5a6L5L2T/fontsize/400/fill ...

  7. mac os x 触摸板点击无效

    macbook默认轻击触摸板无效,这样是为了防止误点击.可是习惯了windows笔记本的我对这一设置非常不习惯. 能够在"system preference"的"Trac ...

  8. Swift开发教程--使用Storyboard进行界面跳转

    使用storyboard结合代码来做确实能够给开发带来非常多的便利. 在实践的过程中,我们常常会遇到界面的跳转问题. 通过控件和界面的建立的"连接"就能够了. 假设是navigat ...

  9. 【ASP.NET】DataTable序列化

    问题描述 主要解决DataTable数据转化为JSON,从Controller传递数据给View的问题. 1   内容区 提供如下方法,仅供参考 public static class ObjectE ...

  10. POST/有道翻译 有bug

    1.发现在翻译时地址没有变,那是POST请求. 2.通过fidder抓包工具抓取url 3.对data分析,发现每次salt和sign都在变化. 4.查看源码,先用站长工具http://tool.ch ...