清除浮动有3种方式
第一种方式
给浮动的元素父元素设置一个固定的高度，从视觉上看到浮动的元素在父元素包裹之内。
我们给浮动元素的父元素设置一个固定
600px像素的高度，一起来看看效果如何。代码块
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>清除浮动</title>
<style>
.box{
width: 600px;
height: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<h1>清除浮动</h1>
</body>
</html>
结果图
这样是解决了下面元素排版布局问题，但是笔者不推荐这么做，因为高度是由子元素的内容撑起来的高度，而不是我们给的固定高度。
第二种方式
其实在
CSS中也有清除浮动的属性，清除浮动属性名为clear。clear属性值说明表
| 属性值 | 描述 |
|---|---|
| left | 清除左侧浮动元素。 |
| right | 清除右侧浮动元素。 |
| both | 清除左右侧浮动元素。 |
要使用这个clear属性必须创建一个新的div元素，创建新的
div元素不能放置任何内容，它只能做一个件事情，那就是清除浮动并且将这个新创建的
div元素放在最后一个浮动元素的后面才会生效。左右清除浮动的属性值笔者在这里就不一一实践了，一般我们就用
both属性值就可以了，左右清除浮动，干嘛还要计较它是左浮动或右浮动呢，直接清除左右浮动就
