时间:2016-01-22 07:26 来源: 我爱IT技术网 作者:佚名
本文所分享的知识点是【clearfix：after清除浮动的用法及测试代码】，欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略，下面是详细的讲解。
clearfix：after清除浮动的用法及测试代码
<html >
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<style type="text/css">
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}
.box{ background:#111;width:500px; position:relative;}
.l{float:left; background:#333;width:200px; height:100px;}
.r{float:right;background:#666;width:200px; height:200px;}
.s{width:100px; height:100px;background:#999;position:absolute;right:-50px;;}
</style>
<div class="box clearfix">
<div class="l">left</div>
<div class="r">right</div>
<div class="s">absolute</div>
</div>
</body>
</html>
关于clearfix：after清除浮动的用法及测试代码的相关讨论如下：
相关问题：有关css伪类:after清除浮动的问题
答：【浮动产生负作用 】 1、背景不能显示由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。 2、边框不能撑开如上图中，如果父级设置了CSS边框属性（css border），由于... >>详细
相关问题：.clear和.clearfix:after的区别，分别什么样的情况...
答：这是两种清除浮动的方式，.clear 就是在需要清除浮动的父元素内部的所有浮动元素后面添加一个无意义的空标签来清除浮动，并且自定义其CSS为clear:both，加上其它属于是为了让这个标签不受其它因素的影响；.clearfix:after 就是利用after伪对象来... >>详细
相关问题：.clear和.clearfix:after的区别，分别什么样的情况...
答：这跟优化有什么关系？ 这两条CSS是不同的两个东西怎么能比较哪个好坏呢？ .clear是选择器而已，就是为class为clear的元素规定样式 .clear:after是加外一种东西，after是个伪元素，意思就是在class为clear的元素后面加入新内容。 clearfix:after{... >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-