1.浮動
(1)、標準流
這個單詞很多人翻譯為文件流，字面翻譯普通流或者標準流都可以。
(2)、浮動
浮動最早是用來控制，以便達到其他元素（特別是文字）實現「環繞」的效果。
(3)、浮動的分類
在css中，通過float屬性來定義浮動，其基本語法格式如下：
選擇器屬性值描述
left元素向左浮動
right元素向右浮動
none元素不浮動（預設值）
(4)、浮動的特徵
浮動脫離標準流，不佔位置，會影響標準流。浮動只有左右浮動。
浮動首先建立包含塊的概念。就是說，浮動的元素總是找離它最近的父級元素對齊。但
是不會超出內邊距的範圍。
1.乙個父盒子裡面的子盒子，如果其中乙個子級有浮動的，則其他子級都需要浮動。
這樣才能一行對齊顯示。
2.元素新增浮動後，元素會具有行內塊元素的特性。元素的大小完全取決於定義的大
小或者預設的內容多少浮動根據元素書寫的位置來顯示相應的浮動。
總結：1、浮動後的元素會漂浮在其他元素上邊
2、浮動後的元素是不佔原來的位置
3、浮動後的元素不能超出父元素的範圍
4、浮動後的元素在同一水平線上顯示
5、浮動後的元素會自動的轉化為行內塊元素
6、浮動後的元素不能超出父元素的內邊距和邊框
2.清除浮動
(1)、為什麼要清除浮動
由於浮動元素不再占用原文件流的位置，所以它會對後面的元素排版產生影響，為了解
決這些問題，此時就需要在該元素中清除浮動。準確地說，並不是清除浮動，而是清除浮動後造成的影響
(2)、清除浮動本質
清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0的問題。
(3)、清除浮動的方法
其實本質叫做閉合浮動更好一些,記住，清除浮動就是把浮動的盒子圈到裡面，讓父盒
子閉合出口和入口不讓他們出來影響其他元素。
在css中，clear屬性用於清除浮動，其基本語法格式如下：
選擇器left不允許左側有浮動元素（清除左側浮動的影響）
right不允許右側有浮動元素（清除右側浮動的影響）
both同時清除左右兩側浮動的影響
1、額外標籤法
w3c推薦的做法是通過在浮動元素末尾新增乙個空的標籤例如
，或則其他標籤br等亦可。
優點：通俗易懂，書寫方便
缺點：新增無意義的標籤，結構化語義化較差
2、父級新增overflow屬性方法
可以給父級新增：overflow為hidden|auto|scroll都可以實現。
優點：**簡潔
缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的
元素3、偽元素清除浮動
在父元素中使用after偽元素清除浮動
:after方式為空元素的公升級版，好處是不用單獨加標籤了
3.定位
(1)、定位屬性
元素的定位屬性主要包括定位模式和邊偏移兩部分。
1、邊偏移
邊偏移屬性描述
top頂端偏移量，定義元素相對於其父元素上邊線的距離
bottom底部偏移量，定義元素相對於其父元素下邊線的距離
left左側偏移量，定義元素相對於其父元素左邊線的距離
right右側偏移量，定義元素相對於其父元素右邊線的距離
也就說，以後定位要和這邊偏移搭配使用了，比如top:100px;left:30px;等等。
2、定位模式(定位的分類)
在css中，position屬性用於定義元素的定位模式，其基本語法格式如下：
選擇器position屬性的常用值
值描述static自動定位（預設定位方式）
relative相對定位，相對於其原文件流的位置進行定位
absolut
絕對定位，相對於其上乙個已經定位的父元素進行定位
efixed固定定位，相對於瀏覽器視窗進行定位
(3)、靜態定位
靜態定位是所有元素的預設定位方式，當position屬性的取值為static時，可以將元素
定位於靜態位置。所謂靜態位置就是各個元素在html文件流中預設的位置。
上面的話翻譯成白話：就是網頁中所有元素都預設的是靜態定位哦！其實就是標準流
的特性。
在靜態定位狀態下，無法通過邊偏移屬性（top、bottom、left或right）來改變元素的
位置。(4)、相對定位
相對定位是將元素相對於它在標準流中的位置進行定位，當position屬性的取值為
relative時，可以將元素定位於相對位置。
對元素設定相對定位後，可以通過邊偏移屬性改變元素的位置，但是它在文件流中的位
置仍然保留。
注意：1.相對定位最重要的一點是，它可以通過邊偏移移動位置，但是原來的所佔的位置，
繼續占有。
2.其次，每次移動的位置，是以自己的左上角為基點移動（相對於自己來移動位置）
就是說，相對定位的盒子仍在標準流中，它後面的盒子仍以標準流方式對待它。（相對
定位不脫標）
如果說浮動的主要目的是讓多個塊級元素一行顯示，那麼定位的主要價值就是移動位
置，讓盒子到我們想要的位置上去。
(5)、絕對定位
[注意]如果文件可滾動，絕對定位元素會隨著它滾動，因為元素最終會相對於正常流的
某一部分定位。
當position屬性的取值為absolute時，可以將元素的定位模式設定為絕對定位。
注意：絕對定位最重要的一點是，它可以通過邊偏移移動位置，但是它完全脫標，完
全不佔位置。
1、父級沒有定位
若所有父元素都沒有定位，以瀏覽器為準對齊(document文件)。
2、父級有定位
絕對定位是將元素依據最近的已經定位(絕對、固定或相對定位)的父元素(祖先)進行定
位。子絕父相
這個「子絕父相」太重要了，是我們學習定位的口訣，時時刻刻記住的。
這句話的意思是子級是絕對定位的話，父級要用相對定位。
首先，絕對定位是將元素依據最近的已經定位絕對、固定或相對定位）的父元素（祖先）
進行定位。
就是說，子級是絕對定位，父親只要是定位即可（不管父親是絕對定位還是相對定位，
甚至是固定定位都可以），就是說，子絕父絕，子絕父相都是正確的。
所以，我們可以得出如下結論：
因為子級是絕對定位，不會占有位置，可以放到父盒子裡面的任何乙個地方。父盒子布
局時，需要占有位置，因此父親只能是相對定位.這就是子絕父相的由來。
絕對定位的盒子水平/垂直居中，普通的盒子是左右margin改為auto就可，但是對於
絕對定位就無效了，定位的盒子也可以水平或者垂直居中，有乙個演算法：
首先left50%父盒子的一半大小
然後走自己外邊距負的一半值就可以了margin-left。
(7)、固定定位
固定定位是絕對定位的一種特殊形式，類似於正方形是乙個特殊的矩形。它以瀏覽器窗
口作為參照物來定義網頁元素。當position屬性的取值為fixed時，即可將元素的定位模式
設定為固定定位。
當對元素設定固定定位後，它將脫離標準文件流的控制，始終依據瀏覽器視窗來定義自
己的顯示位置。不管瀏覽器滾動條如何滾動也不管瀏覽器視窗的大小如何變化，該元素都會
始終顯示在瀏覽器視窗的固定位置。
固定定位有兩點：
1、固定定位的元素跟父親沒有任何關係，只認瀏覽器。
2、固定定位完全脫標，不占有位置，不隨著滾動條滾動。
記憶法：就類似於孫猴子，無父無母，好不容易找到乙個可靠的師傅（瀏覽器），就聽
的師傅的，別的都不聽。
ie6等低版本瀏覽器不支援固定定位。
疊放次序
當對多個元素同時設定定位時，定位元素之間有可能會發生重疊。
在css中，要想調整重疊定位元素的堆疊順序，可以對定位元素應用z-index層疊等級
屬性，其取值可為正整數、負整數和0。
比如：z-index:2;
注意：z-index的預設屬性值是0，取值越大，定位元素在層疊元素中越居上。
如果取值相同，則根據書寫順序，後來居上。
後面數字一定不能加單位。
只有相對定位，絕對定位，固定定位有此屬性，其餘標準流，浮動，靜態定位都無此屬
性，亦不可指定此屬性。
定位 與浮動
1 區塊浮動 絕對定位 脫離正常的文件流，相當於飄起來 向 飄起來，於是就有了float 1，div 是塊級元素，他會自動換行 2，對元素使用 float 浮動的話，他會自動的把定位方式變為 絕對定位 如果絕對定位之後，這個元素下面還有元素，會頂上去 注釋 正常情況下，按照上下的順序正常顯示，當浮動...
浮動與定位
浮動 浮動元素會以某種方式從文件的正常流中刪除，再按照屬性值移動到制定的位置，浮動元素從某種意義上來說自成一派，但是他仍會對文件布局產生影響。注意事項 a.如果要對乙個非替換元素進行浮動，那麼必須為該元素宣告乙個寬度，否則，根據css規則，元素寬度近似為0，元素布局將會出現意想不到的結果。b.元素宣...
浮動與定位
1 元素的浮動屬性float的 基本的格式 選擇器一般他的值包過3個在內 屬性值 描述 left 元素會向左浮動 right 向右 none 不浮動 2 清除浮動 clear的屬性 選擇器屬性值 描述 left 不允許左側有浮動元素 清除左側浮動的影響 right 不允許右側有浮動元素 清除右側浮動...