利用伪元素: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 ... 
随机推荐
- 布局神器display:flex
			2009年,W3C提出了一种新的方案--Flex布局,可以简便.完整.响应式地实现各种页面布局.目前已得到所有现在浏览器的支持. flex浏览器支持 一.Flex布局是什么? Flex是Flexi ... 
- POJ1273 网络流-->最大流-->模板级别-->最大流常用算法总结
			一般预流推进算法: 算法思想: 对容量网络G 的一个预流f,如果存在活跃顶点,则说明该预流不是可行流. 预流推进算法就是要选择活跃顶点,并通过它把一定的流量推进到它的邻接顶点,尽可能将正的赢余减少为0 ... 
- linux nginx搭配https
			微信小程序upload接口必须是https请求,所以就搭建https 1.申请ssl证书 这里用的是腾讯云提供的免费ssl. https://console.qcloud.com/ssl?_ga=1. ... 
- 深入理解php内核 编写扩展 I:介绍PHP和Zend
			内容: 编写扩展I - PHP和Zend起步 原文:http://devzone.zend.com/public/view/tag/Extension Part I: Introduction to ... 
- js(jquery)绑定点击事件
			<button type="submit" id="test">test</button> 第一种 $("#test" ... 
- 利用模板template动态渲染jsp页面
			一.场景 在js中写html简直是噩梦,刚进新公司,在codereview的时候得知可以通过将html模板写在jsp页面,然后由js调取模板,利用replace()方法替换传值的方式避免在js中拼接h ... 
- node.js之express框架入门篇
			一.express框架简介 express框架是后台的Node框架,在后台的受欢迎的程度,和jQuery一样 英语官网:http://expressjs.com/ 中文官网:http://www.ex ... 
- Chrome development tools学习笔记(5)
			调试JavaScript 随着如今JavaScript应用的越来越广泛,在面对前端工作的时候,开发人员须要强大的调试工具来高速有效地解决这个问题.我们文章的主角,Chrome DevTools就提供了 ... 
- B. Simple Game( Codeforces Round #316 (Div. 2) 简单题)
			B. Simple Game time limit per test 1 second memory limit per test 256 megabytes input standard input ... 
- Codeforces 29D Ant on the Tree 树的遍历 dfs序
			题目链接:点击打开链接 题意: 给定n个节点的树 1为根 则此时叶子节点已经确定 最后一行给出叶子节点的顺序 目标: 遍历树并输出路径.要求遍历叶子节点时依照给定叶子节点的先后顺序訪问. 思路: 给每 ... 
