去除浮动方法3-伪元素选择器
相比外墙法与内墙法,更为推荐的是伪元素的方法
利用伪元素选择器清除浮动
本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都一样
注意点:
IE6中不支持这种方式, 为了兼容IE6必须给前面的盒子添加*zoom:1;属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>去除浮动-伪元素选择器</title>
<style>
.box0{
background: red;
}
.box0 span{
float: left;
background: yellow;
}
.box0{
/*兼容IE6*/
*zoom:1;
}
.box0:after{
/*设置添加的子元素的内容为空*/
content: "";
/*设置添加的子元素为块级元素*/
display: block;
/*设置添加的子元素的高度为0*/
height: 0;
/*设置添加的子元素看不见*/
visibility: hidden;
/*给添加的子元素设置clear: both;*/
clear: both;
}
.box1{
background: green;
}
.box1 span{
float: left;
background: pink;
}
</style>
</head>
<body>
<div class="box0">
<span>我是一个段落</span>
<span>我是一个段落</span>
<span>我是一个段落</span>
</div>
<div class="box1">
<span>我是一个段落</span>
<span>我是一个段落</span>
<span>我是一个段落</span>
</div>
</body>
</html>
发表评论