利用伪元素: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 ...
随机推荐
- 白话图解HTTPS原理
[前言]最近看过几篇文章,内容是关于"全民HTTPS"的.为什么HTTPS,突然会受到如此多业内人士的青睐呢?HTTPS究竟是什么呢?它与HTTP又有怎样的区别呢? 带着这 ...
- 如何扩展或者添加硬盘给VMware的Linux操作系统
我们在使用Linux系统一段时间以后,可能添加的东西原来越多导致原来开辟的硬盘不够,当硬盘剩余空间过小时Ubuntu系统也会给出提示或者可以通过df -hl命令查看你硬盘使用情况如下图所示:我已经用 ...
- Mysql服务器SQL模式 (官方精译)
MySQL服务器可以在不同的SQL模式下运行,并且可以根据sql_mode系统变量的值对不同的客户端应用不同的模式.DBA可以设置全局SQL模式以匹配站点服务器操作需求,并且每个应用程序可以将其会话S ...
- Python处理json字符串转化为字典
有一个需求,需要用python把json字符串转化为字典 inp_str = " {'k1':123, 'k2': '345','k3','ares'} " import json ...
- C++几个技巧:智能指针在消息传递中的使用,元组,及lambda删除器
1.SendMessage/PostMessage中传递对象参数 (1)方法1:使用shared_ptr 发送端: PostMessage(MyhWnd, CWM_SOME_ERROR, 0, rei ...
- spring的aop详解
一.aop术语 1.连接点joinpoint: 程序执行的某个特定位置:如类开始初始化之前.类初始化之后.类某个方法调用前.调用后等.Spring仅支持方法的连接点,即仅能在方法调用前.方法调用后以及 ...
- JAVA基础-----Maven项目的搭建
Maven项目的搭建 一.前言 maven官网:http://maven.apache.org/, 文章简介:本文章从三个模块来了解Maven,分别是 Maven的基本概念~, Maven项目的安装和 ...
- MySQL远程訪问的两个问题
安装MySQL后,不能远程訪问.进行例如以下配置就可以 连接后,依旧不能连接,报例如以下错误: 1042 - Can't get hostname for your address 解决方法在my.i ...
- Linux禁用显示“缓冲调整”
Linux禁用显示"缓冲调整" youhaidong@youhaidong-ThinkPad-Edge-E545:~$ free -o total used free shared ...
- 给新手--安装tomcat后username和password设置以及项目怎么部署在tomcatserver上
安装后tomcatserver后.登陆首先就是让输入username和password.但是我们在安装tomcat的过程中好像没有让设置username和password,这时候可能有人就抓狂了.还有 ...