float浮動:left左浮動，right右浮動，元素浮動之後會脫離原來的文件流，參與浮動文件流，在浮動文件流中塊元素也是橫排布局，寬度也不再是100%
cursor:pointer;滑鼠樣式
clear:both;最基本清除浮動的方法，是在最後乙個元素後邊新增乙個元素，設定這個元素的clear為both
在不新增新元素的情況下清除浮動：浮動的元素都會有乙個父物體，可以為父物體新增乙個字尾偽元素，在字尾中清除浮動， 一般情況下都會將清除浮動的樣式寫成乙個class(clear-fix)
哪個元素需要清除元素的浮動 就為這個元素新增這個class
！！！使用浮動布局，必須在最後乙個元素結束的地方清除浮動，否則會影響後續標籤的布局，也會導致父元素不能根據內容顯示高度flex布局，display:flex;讓該標籤作為容器開啟彈性布局，容器開啟彈性布局後，預設容器中所有的專案(容器的子標籤)都是在行內展示的
flex-direction設定主軸方向:
預設主軸方向為row，row指橫軸(x軸)，預設專案從左向右進行排列
row-reverse，主軸方向依然是橫軸，預設專案從右向左進行排列
column，設定主軸方向為豎軸(y軸)，預設從上向下進行排列
column-reverse，設定主軸方向為豎軸(y軸)，預設從下往上進行排列
justify-content設定在主軸方向的對齊方式:
預設為 flex-start 主軸開始位置進行布局
flex-end，專案從左往右依次排列，整體右對齊
center，專案從左往右依次排列，整體居中對齊
space-around，專案從左往右依次排列，整體兩端有留白(專案間隔的一半)，每個專案之間的間隔相同
space-between，專案從左往右依次排列,整體兩端對齊，沒有留白，專案間隔相同
align-items設定專案在交叉軸的對齊方式，交叉軸，垂直於主軸的軸(y軸):
flex-start，預設值，交叉軸的開始位置布局
center，交叉軸方向居中顯示
stretch，如果專案未設定高度，則拉伸為容器同等高度
baseline，專案基線對齊
flex-wrap設定換行
預設nowrap情況下，一行之內放不下所有的專案，會將專案進行壓縮，不會自動換行
wrap，換行，從flex-start向flex-end進行換行，多出來的行放在下面
wrap-reverse，從flex-end向flex-start進行換行，多出來的行放在上面
flex-grow設定專案方法比例
單個專案在主軸方向的排序，預設值0，值越小越靠前
預設值0，表示即使存在剩餘空間，也不放大
flex-shrink，收縮比率當空間不足時對於剩餘空間為負的值的處理
預設值為1，當容器沒有設定換行並且一行內顯示不下標籤，專案缺省會被壓縮
值為0表示專案不允許被壓縮
align-self，單獨設定某個專案的交叉軸對齊方式，這個值可以覆蓋容器中的align-items
flex-basis:~px;設定元素在布局方向上的長度
上(頂部導航)
中(左中右)
下(底部頁尾)
常用布局（浮動布局 絕對定位布局 聖杯布局）
常用布局 1.流式布局 2.浮動布局 3.絕對定位布局 4.聖杯布局 body 浮動布局 header bd footer main leftside right 絕對定位布局 header bd footer leftside main right 聖杯布局 header main bd foot...
聖杯布局 浮動實現
聖杯布局是一種很常見的css布局。他要求 1 上部和下部各自占領螢幕所有寬度。2 上下部之間的部分是乙個三欄布局。3 三欄布局兩側寬度不變，中間部分自動填充整個區域。4 中間部分的高度是三欄中最高的區域的高度。浮動實現 12 3 1 填充三欄這一步驟，首先給底部區域清除浮動，防止跟隨上邊的區域一起浮...
聖杯布局 浮動清浮
布局要求1.main模組最先載入 2.main模組寬度佔滿父容器 3.main模組浮動，left right模組居左右 複製 來個例子 先看小例子的最終效果 前為未清除浮動，後為清除浮動 基礎結構聖杯布局 content clearfix main text main left text left ...