利用伪元素:after清除浮动

时间:2022-11-01 10:41:04

一、代码

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. &lbrack;CSS&rsqb;利用伪元素实现一些特殊图形

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

  7. &lbrack;CSS&rsqb;利用伪元素实现一些特殊图形 from baidu校招

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

  8. 伪类 &colon;after 清除浮动的原理和方法

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

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

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

随机推荐

  1. Django 1&period;7 throws django&period;core&period;exceptions&period;AppRegistryNotReady&colon; Models aren&&num;39&semi;t loaded yet

    在程序中要添加django.setup() 整个程序如下所示 import os import django def populate(): python_cat = add_cat('Python' ...

  2. 介绍NSURLSession网络请求套件

    昨天翻译了一篇<NSURLSession的使用>的文章,地址:http://www.cnblogs.com/JackieHoo/p/4995733.html,原文是来自苹果官方介绍NSUR ...

  3. 如何高效的编写Verilog HDL——进阶版

    博主之前写过一篇文章来谈论如何高效的编写Verlog HDL——菜鸟版,在其中主要强调了使用Notepad++来编写Verilog HDL语言的便捷性,为什么说是菜鸟版呢,因为对于新手来说,在还没有熟 ...

  4. python中使用redis实战

    from redis import StrictRedis rds = StrictRedis(host='127.0.0.1', port=6379, db=0, decode_responses= ...

  5. BZOJ2616 &colon; SPOJ PERIODNI

    长为$A$,宽为$B$的矩阵放$K$个车的方案数$=C(A,K)\times C(B,K)\times K!$. 建立笛卡尔树,那么左右儿子独立,设$f[i][j]$表示$i$子树内放$j$个车的方案 ...

  6. Logstash解析Json array

    logstash解析json数组是一种常见的需求,我以网上一组数据为例来描述 我们的数据test.json内容如下:(此处我linux上的json文本需要是compact的) {"type& ...

  7. ASP&period;NET MVC5&plus;EF6&plus;LayUI实战教程,通用后台管理系统框架(5)- 创建项目结构

    前言 关于理论知识,我的表达能力有限,知识水平有限,就不过多的讲解编程工作中的专用术语了,大家写的代码多了,自然就懂了 前几节课,我们看到了后台的主页面,以及一个自认为比较漂亮的登录界面,算是编程套路 ...

  8. Oracle 11g DRCP配置与使用

    Oracle 11g DRCP配置与使用Oracle 11g推出了驻留连接池(Database Resident Connection Pool)特性,提供了数据库层面上的连接池管理机制,为应对高并发 ...

  9. 从git获取项目代码

    1.先复制项目的SSH链接备用 2.在你要放置项目的地方git bash here 3.按照以下步骤走: $ git clone YourSSHAddress // clone项目 $ ls // 查 ...

  10. Spring Boot高级

    Spring Boot高级内容概要一.Spring Boot与缓存二.Spring Boot与消息三.Spring Boot与检索四.Spring Boot与任务五.Spring Boot与安全六.S ...