clearfix清除浮动闭合容器之:after与:before
来源:互联网 发布:降临影评知乎 编辑:程序博客网 时间:2024/05/21 06:44
首先对伪类:before与:after做下注脚
:before 伪元素在元素之前添加内容。
:after 伪元素在元素之后添加内容。
这2个伪元素允许创作人员在元素内容的 最前面/最后面 插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。该二伪类不被IE6/7所支持。
好了,进入正题
在平常我们coding时候经常会发生子元素浮动而引起父级元素不能完全撑开的状况,
可能很多朋友给父级元素用overflow:hidden简单粗暴的解决,但这种方式有弊端,一是在IE6下不能完美解决,二是假如在该模块有定位的层就有定位层显示不完整的可能。
也有可能有些朋友是在父级元素里最后添加一个<div style=”clear:both”></div>来解决这个问题,但这样我们的HTML代码里就多了些冗余的代码且从语义化角度来看这也是不合理的。
下面创建一个.clearfix类来完美解决这个问题
上代码:
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}* html .clearfix{zoom:1;} /* IE6 */*+html .clearfix{zoom:1;} /* IE7 */
快给你的不能完全闭合的父级元素加上.clearfix类试试吧
阅读全文
0 0
- clearfix清除浮动闭合容器之:after与:before
- clearfix清除浮动闭合容器之:after与:before
- CSS 之 清除浮动.clearFix:after
- clearfix:after 清除css浮动
- clearfix:after 清除css浮动
- clearfix:after 清除css浮动
- css之clearfix清除浮动
- CSS之关于clearfix--清除浮动
- CSS之关于clearfix--清除浮动
- 闲聊CSS之关于clearfix--清除浮动
- 闲聊CSS之关于clearfix--清除浮动
- 闲聊CSS之关于clearfix--清除浮动
- 闲聊CSS之关于clearfix--清除浮动
- CSS之使用clearfix清除浮动
- css之使用clearfix类清除浮动
- cssCSS之闭合浮动(清除浮动)
- 浮动闭合最佳方案:clearfix
- 清除浮动(clearfix)
- 浅谈表值函数和标量值函数
- VUE+WebPack游戏设计:实现两张扑克牌的逐对厮杀特效
- oracle 去空格函数未生效,发现ASCII值为49824的字符
- 阿里云Centos系统下服务器Nginx+PHP+MySql安装配置
- 查看是否存在某个class类名 原生JS添加类名 删除类名
- clearfix清除浮动闭合容器之:after与:before
- 图片上传到服务器,存储路径和查看图片的设置
- java 剑指offer 第二题:请实现一个函数,将一个字符串中的空格替换成“%20”。例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy。
- 合并真机和模拟器的framework的可执行文件
- 每天一个linux命令(27):文件和目录属性 Linux 目录结构
- jdbc
- Docker使用Mysql
- 终极 Shell
- R语言-加载与保存数据