什么是浮动
CSS 的 Float(浮动)，使元素向左或向右移动，在其周围的元素也会重新排列。
Float(浮动)，往往是用于图像，但它在（盒子）布局时一样非常有用。
元素怎样浮动
- 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动；
- 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止；
- 浮动元素之后的元素将围绕它；
- 浮动元素之前的元素将不会受到影响。
彼此相邻的浮动元素
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
clear–清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 第一个div盒子 */
.container{
width: 400px;
/* display: inline-block ; */
border: 1px solid grey;
}
.left{
background-color: rgb(24,18,18);
/* display: inline-block ; */
height: 400px;
width: 200px;
float: left;
}
.right{
background-color:red;
/* display: inline-block; */
height: 400px;
width: 200px;
float: right;
}
.container2{
width:800px;
height:200px;
background-color: blue; /*蓝色是最下面一层*/
}
/*清除浮动第一步，定义一个选择器，名字叫clearfix */
.clearfix::after{
content:"";
display: block;
clear:both;
}
</style>
</head>
<body>
<!-- 清除浮动的第二步,在父级元素上加样式 -->
<div class="container clearfix">
<!-- 将类选择器添加到clear -->
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="container2"></div>
</body>
</html>