浮动流的原理是：浮动的目的可以让块级元素左右漂浮【打破块级元素独占一行的特性】
浮动流float只有两个属性，一个left左浮动，一个right右浮动。
浮动的原则就是：只能在块元素当前行的左右浮动，不可能上下浮动，这也是和定位最大的区别【定位没有任何限制，可以上下左右到处跑】
为什么要清除浮动流：浮动流就相当于一个有弹性的盒子，当盒子拉到最大的时候，如果没有什么东西来撑住盒子，一旦释放，盒子就会恢复到原来位置（崩塌）,浮动流的末尾增加一个div来清除浮动流就是起到支撑的作用！
* {
/**
clear功能：可以有效防止弹性盒子回缩！
*/
// 浮动之后(清除左边浮动),左边不能有人
clear: left;
// 浮动之后(清除右边浮动),右边不能有人
clear: right;
// 浮动之后(清除两边浮动),左右两边都不能有人
clear: both;
}浮动位置总结一句话：不管当前块元素的上面块元素怎么浮动，只要确保当前块元素最后被迫顶到哪一行，那么他的位置一定在在这一行的left或right（浮动无法主动改变上下位置）
案例的核心原理：既然div2没有设置浮动，那么肯定独占一行，所以div3只能在div2下面这一行（浮动除非是被迫顶上去，否则不可能改变上下位置，只能在当前行的左右漂浮）的左右浮动！
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="scss/style.css">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>.div1 {
width: 200px;
height: 200px;
background: red;
float: left;
}
// 既然div2没有设置浮动，那么肯定独占一行，所以div3只能在div2下面这一行的左右浮动！
.div2 {
width: 250px;
height:250px;
background: black;
}
.div3 {
width: 300px;
height: 300px;
background: green;
float: left;
}
最终结果：
