浮动的顺序贴靠
子盒子会按照顺序进行贴靠，如果没有足够的空间，则会寻找在前一个兄弟元素。
浮动元素一定能设置宽高浮动元素不再区分块级元素，和行内元素，已经脱离文档流，一律能够设置宽高，即使它是span等行内标签。
右浮动：只需要将float:right;
<!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>
.box {
border: 1px solid #000;
width:300px;
height:200px;
/* background-color:red; */
}
/* 左浮动 */
.box .c1 {
width:200px;
height:100px;
background-color:red;
float:left;
}
.box .c2 {
width:100px;
height:50px;
background-color:blue;
float:left;
}
.box .c3 {
width:100px;
height:50px;
background-color:orange;
float:left;
}
span {
/* 当元素被浮动后就不分块级元素和行内元素了，都可以设置宽高 */
background-color:yellow;
float:left;
width:50px;
height:50px;
}
.box1 {
height:200px;
border: 1px solid #000;
}
/* 右浮动 */
.box1 .b1 {
width:100px;
height:100px;
background-color:red;
float:right;
}
.box1 .b2 {
width:100px;
height:100px;
background-color:yellow;
float:right;
}
.box1 .b3 {
width:100px;
height:100px;
background-color:blue;
/* 右浮动 */
float:right;
}
</style>
</head>
<body>
<div class="box">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<span>1</span><span>2</span><span>3</span>
</div>
<div class="box1">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>
</body>
</html>
