遵循元素自身的特性，在整個頁面中，按照html的書寫順序，塊級元素從上到下排列，行內元素從左到右排列，寬度達到最大值會自動折行。
通過浮動float這個屬性，改變元素的排列方式，可以讓所有的元素在一行顯示。
通過定位的屬性，改變元素的位置，讓元素層疊顯示。
元素遵循自身的屬性，根據html的書寫順序，塊級元素從上到下排列，行內元素從做到右排列，寬度達到最大值會自動折行。
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span</span>
<i>i</i>
float:left;
/*左浮動*/
float:right;
/*右浮動*/
float:none;
/*設置為不浮動*/
float:inherit;
/*默認繼承父級元素的浮動方式*/
浮動這個屬性誕生其實只是用來實現一個簡單的文字環繞圖片而已，僅此而已。而我們目前用浮動實現頁面布局本不是浮動該干的事情。
會使元素向左或向右移動，其周圍的元素也會重新排列。
浮動的元素可以左右移動，直到他的邊緣碰到父級元素的邊緣或另一個浮動元素的邊緣
浮動就是帶有方向的display:inline-block（將元素轉為行內塊級元素）的屬性
display:inline-block從某種意義上的作用就是讓幾個塊級元素在一行顯示
但是只要轉為行內塊級元素，瀏覽器就會讀取代碼之間的空格，在瀏覽器中解析為一段小的間距，那我們就要刪除html代碼之間的空格，很麻煩，但是浮動不會出現inline-block的問題，所以我們用浮動去代替inline-block。
第一個作用：讓幾個盒子在一行顯示
<style>
li{
width: 100px;
height: 100px;
background: orange;
margin:10px;
float: left;
font-size: 36px;
/*float: left;
從浮動的盒子中第一個盒子開始，從左邊開始，從左到右依次顯示
float: right;
從右邊開始，從第一個盒子開始，從右到左依次顯示
*/
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
第二個作用：讓盒子靠右顯示
<style>
div{
width: 600px;
height: 300px;
background: blue;
}
div p{
width:300px;
height:50px;
background: yellow;
float: right;
}
</style>
<div>
<p>文字</p>
</div>