去除浮动方法4-overflow
这种方式简单，推荐使用
overflow
1可以将超出标签范围的内容裁剪掉
2清除浮动
3可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>去除浮动-伪元素法</title>
<style>
.box0{
background: red;
overflow: hidden;
}
.box0 span{
float: left;
background: yellow;
}
.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>
发表评论