1、浮動的定義
fo屬性定義元素在哪個方向浮動，任何元素都可以浮動。
| 值 | 描述 |
| left | 元素向左浮動 |
| right | 元素向右浮動 |
2、浮動的原理：
①浮動以後使元素脫離了文件流
②浮動只有左右浮動，沒有上下浮動
3、元素向左浮動
脫離文件流之後，元素相當於在頁面上面增加一個浮層來放置內容。此時可以理解為有兩層頁面，一層是底層的原頁面，一層是脫離文件流的上層頁面，所以會出現摺疊現象。
<div class="xiao"></div>
<div class="da"></div>
.xiao{
width: 200px;
height: 200px;
background-color: aqua;
float: left;
}
.da{
width: 400px;
height: 400px;
background-color: blueviolet;
}
標準流：
脫離標準流：
4、元素向右浮動
<div class="xiao"></div>
<div class="da"></div>
.xiao{
width: 200px;
height: 200px;
background-color: aqua;
float: right;
}
.da{
width: 400px;
height: 400px;
background-color: blueviolet;
}
5、所有元素向左浮動
當所有元素同時浮動的時候，會變成水平擺放，向左或者向右
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
div{
width: 200px;
height: 200px;
float: left;
}
.a1{
background-color: red;
}
.a2{
background-color: blue;
}
.a3{
background-color:green;
}
6、當容器不足時
當容器不足以橫向擺放內容時候，會在下一行擺放
<div class="hezi">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
.hezi{
width: 500px;
height: 500px;
background-color: #666;
}
div{
width: 200px;
height: 200px;
float: left;
}
