一直在使用浮动,但是却没有总结过一些清除浮动的方法,今天总结一下分享给大家。
首先演示一下为什么要清除浮动:
可以看到,父级元素并没有撑开,子元素跳脱了这个范围
接下来一次介绍三种方法 名字以备注好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.cd {
border: 1px solid greenyellow;
/* overflow: hidden; 第一种方法 父级元素overflow:hhidden*/
}
.tag {
width: 50px;
height: 50px;
border: 1px solid red;
float: left;
}
/* .cd::after {
content: ".";
display: block;
height: 0;
clear: both;第三种方法 利用父级元素设置伪类来清除
} */
/* #clear {
clear: both;第二种方法 利用最后的一个空div设置clear: both属性来闭合元素 伪类的方法原理类似
} */
</style>
</head>
<body>
<div class="cd">
<div class="tag"></div>
<div class="tag"></div>
<div class="tag"></div>
<div class="tag"></div>
<div class="tag"></div>
<!-- <div id="clear"></div> 第一种方法-->
</div>
<script>
</script>
</body>
</html>