處理塊元素獨佔一行，可以使用display，也可以使用浮動和定位
浮動 float
浮動是指：當前元素，脫離文件流，預設在當前的行對既定的方向進行移動（預設橫排）
浮動的影響
自身的父元素無法獲取寬高
後續的元素會自動補位
浮動會脫離當前文件流，覆蓋標準流的元素
auto會失效
（auto）：根據自身的所佔位置，自動居中，但必須注意塊元素可以橫排顯示(失去獨佔一行的特性)
行元素可以設定寬度和高度
除了auto以外，依然支援margin
提公升半個層級 z-index
清除浮動
使用浮動布局，那麼一定要清除浮動，否則原地**！
方法一：
方法二：
"main" style=
"overflow: hidden;"
>
="box1"
>
<
/div>
="box2"
>
<
/div>
="box3"
>
<
/div>
="box4"
>
<
/div>
<
/div>
"main"
>
="box1"
>
<
/div>
="box2"
>
<
/div>
="box3"
>
<
/div>
="box4"
>
<
/div>
"clear: both; width: 0px; height: 0px"
>
<
/div>
<
/div>
"main" style=
"display: inline-block;"
>
="box1"
>
<
/div>
="box2"
>
<
/div>
="box3"
>
<
/div>
="box4"
>
<
/div>
<
/div>
//製作工具
.clearfix:after
;//啟用工具
.clearfix
//使用工具
="box clearfix"
>
="left"
>我是左浮動<
/div>
<
/div>
！！ 無論什麼定位，都要優先考慮它的參考物件 ！！
預設定位
所謂預設定位是指：不使用定位（有點腦殼疼，但這是最容易的忘掉的）
相對定位
相對的是自身原有的位置
相對定位移動後，會保留原有位置 ( 可以使用定位占用，但普通寫法 時，無法占用 )
不會影響文件流
適用場景：
position: relative;
/* 1) 開啟該元素的定位*/
/*書寫具體的位置*/
/*只有 left 和 top 兩個屬性 */
/*top: 300px;*/
left:
300px;
絕對定位 的參考值： 會去找具有相對定位屬性的父元素
如果沒有，繼續往上找，直到整個文件
90%以上的絕對使用場景，都需要相對定位來配合。
也就是人們趣稱為： 「父相子絕」
適用場景：
/* position: absolute;*/
/*left: 300px;*/
top:
30px;
/* z-index : 數字;
作用： 調整當前元素的層級
注意： 1. 屬性值沒有單位，只寫數字。記得分號結尾
2. 如果需要調整的元素個數較多時，需要將每個元素的層級，都明確劃分
*/ z-index:
1;
position: fixed;
bottom:
0px;
left:
0px;
/* top: auto; */
定位 與浮動
1 區塊浮動 絕對定位 脫離正常的文件流，相當於飄起來 向 飄起來，於是就有了float 1，div 是塊級元素，他會自動換行 2，對元素使用 float 浮動的話，他會自動的把定位方式變為 絕對定位 如果絕對定位之後，這個元素下面還有元素，會頂上去 注釋 正常情況下，按照上下的順序正常顯示，當浮動...
浮動與定位
浮動 浮動元素會以某種方式從文件的正常流中刪除，再按照屬性值移動到制定的位置，浮動元素從某種意義上來說自成一派，但是他仍會對文件布局產生影響。注意事項 a.如果要對乙個非替換元素進行浮動，那麼必須為該元素宣告乙個寬度，否則，根據css規則，元素寬度近似為0，元素布局將會出現意想不到的結果。b.元素宣...
浮動與定位
1 元素的浮動屬性float的 基本的格式 選擇器一般他的值包過3個在內 屬性值 描述 left 元素會向左浮動 right 向右 none 不浮動 2 清除浮動 clear的屬性 選擇器屬性值 描述 left 不允許左側有浮動元素 清除左側浮動的影響 right 不允許右側有浮動元素 清除右側浮動...