利用伪元素:after清除浮动
一、代码
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清除浮动的更多相关文章
- 从知乎首页用户操作入口学习到的CSS技巧 - 合理利用伪元素实现一些装饰样式
最近在模仿做一个静态的PC版知乎,在模仿的过程中,从知乎工程师的方法中学到了不少知识,比如CSS方面的,以下介绍一个今天学到的伪元素的技巧. 示例 DOM结构为: <div class=&quo ...
- 利用伪元素和css3实现鼠标移入下划线向两边展开效果
一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度从0变成100%达到目的. 二.实现: 1.首先定义一个块状元素(行内元素没有宽高)并修改样式为一个背景色为浅灰色的矩形,设 ...
- 转帖 利用伪元素和css3实现鼠标移入下划线向两边展开效果
原帖地址 https://www.cnblogs.com/yangjunfei/p/6739683.html 感谢分享 一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度 ...
- 利用伪元素before实现自定义checkbox样式
原理:label标签的for属性可以将文字与复选框进行关联,点击文字可以同时将复选框选中. 隐藏checkbox标签,利用label标签的before伪元素来实现自定义样式.设置before伪元素的 ...
- 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果
1.颜色小tip知识 在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色 在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更 ...
- [CSS]利用伪元素实现一些特殊图形
给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS ...
- [CSS]利用伪元素实现一些特殊图形 from baidu校招
最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> ---- ...
- 伪类 :after 清除浮动的原理和方法
浮动元素容器的clearing问题1. 问题的由来有这样一种情形:在一个容器(container)中,有两个浮动的子元素.<div> <div style=" ...
- CSS练习-导航栏斜线分隔-利用伪元素
开始切第一张图了,第一个遇到的问题是顶部导航栏这里,用斜线分割.想到的思路是用伪类:before或者:after实现 先写html结构. <!-- 导航栏begin --> <div ...
随机推荐
- HDU4508--完全背包
湫湫系列故事--减肥记I Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) Tot ...
- JAVA读取、写入Excel表格(含03版)
引言 工作中可能会遇到对Excel读取和写入,如果我们自己手动写的话,会很麻烦,但是Apache中有poi工具类.poi工具类封装好了对于Excel读取和写入,我们需要用的时候,直接调用该方法就好了. ...
- swift手记-4
// // ViewController.swift // learn4 // // Created by myhaspl on 16/1/23. // Copyright (c) 2016年 myh ...
- JAVA入门[15]-过滤器filter
一.过滤器 过滤器是可用于 Servlet 编程的 Java 类,可以实现以下目的: 在客户端的请求访问后端资源之前,拦截这些请求. 在服务器的响应发送回客户端之前,处理这些响应. 参考:http:/ ...
- oracle实现主键自增
首先,创建一张表: CREATE TABLE example( ID Number(4) NOT NULL PRIMARY KEY, NAME VARCHAR(25)); 然后,自定义一个序列(seq ...
- DocFX生成PDF文档
使用DocFX生成PDF文档,将在线文档转换为PDF离线文档. 关于DocFX的简单介绍使用DocFX生成文档 使用docfx 命令 1.下载 https://github.com/dotnet/do ...
- F12调试模式下使用console自动提交
F12调试模式下使用console自动提交(F12 的console->输入代码->按enter即可运行) 1.使用定时器setInterval进行自动提交 //方法中可使用jquery调 ...
- java注解细节
现在很多框架都使用注解了,典型的像Spring里面就可以看到大量的注解,比如@Service,@Controller这一类的都是注解.注解Annotation是java一项很重要的功能.下面就来整理一 ...
- 自学Python5.1-模块简介
模块简介 在C语言中如果要引用sqrt这个函数,必须用语句"#include<math.h>"引入math.h这个头文件,否则是无法正常进行调用的.那么在Python中 ...
- iOS支付宝支付相关问题
支付宝实现以及相关问题:http://www.jianshu.com/p/f81578954974 1.支付宝支付流程 1.用户点击支付2.客户端请求服务器用户支付3.服务器接收请求生成金额订单等要给 ...