清除浮动方式四(伪元素)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>79-清除浮动方式四</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
}
.box1 p{
width: 100px;
background-color: blue;
}
.box2 p{
width: 100px;
background-color: yellow;
}
p{
float: left;
}
.box1::after {
/*设置添加内容为空*/
content: "";
/*设置为块级元素*/
display: block;
/*让其不占用空间*/
height: 0;
/*让添加的元素看不见*/
visibility: hidden;
/*给添加的子元素设置clear:both;*/
clear: both;
}
.box1 {
/*兼容ie8以下,但是ie8无法使用伪元素选择器*/
*zoom:1;
}
</style>
</head>
<body>
<div class="box1">
<p>我是文字1</p>
<p>我是文字1</p>
<p>我是文字1</p>
</div>
<div class="box2">
<p>我是文字2</p>
<p>我是文字2</p>
<p>我是文字2</p>
</div>
</body>
</html>
1.第四种方法类似于内墙法加伪元素选择器的做法。
2.但是这个方法为完全采用css来清除浮动,不需要设置html盒子,符合结构和样式分离,不要用结构来设置样式。