伪类清楚浮动

/* 清理浮动 */

.clearfix:after{

    content: " ";

    display: block;

    height: 0;

    visibility: hidden;

    clear: both;

    font-size: 0;

}

.clearfix{

    *zoom: 1;

}

伪类清楚浮动,布布扣,bubuko.com

时间： 2024-11-04 15:58:34

伪类清楚浮动的相关文章

知道css有个content属性吗？有什么作用？有什么应用？可以伪类清除浮动

知道.css的content属性专门应用在 before/after 伪元素上,用来插入生成内容.最常见的应用是利用伪类清除浮动. .clearfix:after { content:"."; //这里利用到了content属性 display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; } after伪元素通过 content 在元素的后面生成了内容为一个点的块级素,再利用clear:b

使用after伪类清除浮动

.department li:after{ content:"."; height:0; visibility:hidden; display:block; clear:both; } 使用after伪类清除浮动

使用 after 伪类清除浮动

以前清除浮动的时候总是在想要清除浮动的元素后面添加 1 <div style="clear:both;"></div> 或者写在br标签里面来解决,但这样会增加无语义的标签,下面是用after伪类实现,兼容多种浏览器 1 .clearfix:after{ 2 content:""; 3 display:block; 4 height:0; 5 clear:both; 6 visibility:hidden; 7 } 为兼容IE6,IE7,因为

管好调皮的熊孩子——通过伪类清除浮动

这学期开始学习我导师主讲的<WEB程序设计>,自己以前做PHP的时候也算是写了很多前段代码,但都是抱着使用的目的去学的,没有系统学习,借着这学期的课,也对这种学习陋习留下的漏洞补补窟窿,做做笔记. 在样式中使用浮动属性的时候常常会想要做这样类似的布局: 根据上面的效果图,很容易就可以写出这样的div布局: <div class="father"> <div class="title"></div> <div cl

项目期复习总结：背景图合并，hack，浏览器内核前缀，伪类after before

目录: 1.背景图合并和CSS Spirit 2.PS基本快捷键 3.hack技术基本书写,为什么不用? 4.内核前缀 5.伪类afterbefore 1.背景图合并和CSS Spirit 背景图合并在使用时有两种方法: ①一种就是你会PS,可以自己PS实现背景图合并成一张图片,再用background-position实现背景图的定位. ②如果你不会PS,那可以用CSS背景图合并工具,直接选好图片后在线制作生成相对应格式的图片,方便快捷. background的语法: background-c

项目期复习总结1：背景图合并，hack，浏览器内核前缀，伪类after before

文件夹: 1.背景图合并和CSS Spirit 2.PS基本快捷键 3.hack技术基本书写,为什么不用? 4.内核前缀 5.伪类afterbefore 1.背景图合并和CSS Spirit 背景图合并在使用时有两种方法: ①一种就是你会PS.能够自己PS实现背景图合并成一张图片.再用background-position实现背景图的定位. ②假设你不会PS.那能够用CSS背景图合并工具,直接选好图片后在线制作生成相相应格式的图片.方便快捷. background的语法: background-

after伪类和overflow清楚浮动

CSS中的伪类和伪元素

伪类伪类与类相似,但又没有类附加标签上.伪类分为UI伪类和结构化伪类. UI伪类 :link(将样式添加到未被访问的链接上) :visted(将样式已添加到访问的链接上) :hover(将样式添加到鼠标悬浮的元素上) :active(将样式添加到被激活的元素上) :focus(将样式添加到被选中的元素上) 结构化伪类 :first-child(将样式添加到第一个子元素上) :last-child(将样式添加到最后一个子元素上) 伪元素伪元素是在文档中若有实无的元素. 主要有以下几种 :fir

CSS3 选择器——伪类选择器

前面花了两节内容分别在<CSS3选择器--基本选择器>和<CSS3选择器--属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分--伪类选择器.伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择