浮动流的原理是:浮动的目的可以让块级元素左右漂浮【打破块级元素独占一行的特性】
浮动流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;
}