Css为什么要清除浮动？（实训）
程序员文章站
2024-01-29 18:12:28
...
Css为什么要清除float带来的浮动呢？
假如说我们有三个块，将第一个和第二个块浮动在第一行，不对第三个块设置浮动，那么页面会如何展示呢？
总结来说为什么要清除浮动：
（1）父级没高度
（2）子盒子浮动了
（3）影响下边的布局了，我们就应该清除浮动了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1{
height: 200px;
width: 200px;
background-color: yellow;
float: left;
}
.d2{
height: 200px;
width: 200px;
background-color: black;
float: left;
}
.d3{
height: 300px;
width: 700px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="box">
<div class="d1"></div>
<div class="d2"></div>
</div>
<div class="d3"></div>
</body>
</html>
如上是代码和展示效果，我们发现第三个块到了前两个的块的下边去 ，那么我们如何在不对第三个块添加浮动的前提下，让第三个块到前两个已经浮动的块下边去呢？
答案：清除浮动
常用的清除浮动的方法：给浮动的元素的父元素添加overflow属性，属性值设置为 auto scroll hidden皆可
清除浮动代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
/* 清除浮动 */
overflow: hidden;
width: 800px;
}
.d1{
height: 200px;
width: 200px;
background-color: yellow;
float: left;
}
.d2{
height: 200px;
width: 200px;
background-color: black;
float: left;
}
.d3{
height: 300px;
width: 700px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="box">
<div class="d1"></div>
<div class="d2"></div>
</div>
<div class="d3"></div>
</body>
</html>
效果如下：