浮動 float
值：left | right | none | inherit
1.css允許浮動任何元素

浮動元素
1.會以某種方式將浮動元素從文件的正常流中刪除，不過它還是會影響佈局
2.一個元素浮動時，其他內容會“環繞”該元素
3.浮動元素周圍的外邊距不會合並。即入如果其他元素與此影象相鄰，而且這些元素也有外邊距，那麼這些外邊距不會與浮動影象的外邊距合併

浮動的詳細內幕
1.包含塊：浮動元素的包含塊是指其最近的塊級祖先元素
2.浮動元素會生成一個塊級框，它會像塊級元素一樣擺放和表現，不論這個元素本身是什麼
3.以下規則控制著浮動元素的擺放和表現：

• 浮動元素的左（或右）外邊界不能超過其包含塊的左（或右）內邊界
• 浮動元素的左（或右）外邊界必須是源文件中之前出現的左（或右）浮動元素的右（左）外邊界，除非後出現浮動元素的頂端在先出現浮動元素的低端下面。這條規則可以防止浮動元素彼此“覆蓋”。
• 左浮動元素的右外邊界不會在其右邊右浮動元素的左外邊界的右邊。這條規則可以防止浮動元素相互“重疊”
• 一個浮動元素頂端不能比其父元素的內頂端更高
• 浮動元素的頂端不能比之前所有浮動元素或塊級元素的頂端更高
• 如果源文件中一個浮動元素之前出現另一個元素，浮動元素的頂端不能比包含該元素所生成框的任何行框的頂端更高
• 左（或右）浮動元素的左（或右）邊有一個浮動元素，前者的右外邊界不能在其包含塊的右（或左）邊界的右（或左）邊
• 浮動元素必須儘可能高的放置

• 左浮動元素必須向左儘可能遠，右浮動元素必須向右儘可能遠，位置越高，就會向右或向左浮動得越遠
  4.浮動元素會延伸，從而包含其所有後代浮動元素。所以，通過將父元素設定為浮動元素，就可以把浮動元素包含在其父元素內
  5.負外邊距可能導致浮動元素移到其父元素的外面
  6.如果一個浮動元素與正常流中的內容發生重疊會怎麼樣呢？

• 行內框與一個浮動元素重疊時，其邊框、背景和內容都在該浮動元素“之上”顯示

• 塊框與一個浮動元素重疊時，其邊框、背景都在該浮動元素“之下”顯示，而內容在浮動元素“之上”顯示

  清除浮動 clear
  值：left | right | both | none | inherit
  1.在css1和css2中，clear工作如下：它會增加元素的上外邊距，使之最後落在浮動元素的下面
  2.在css2.1中，引入了一個清除區域：在元素上外邊距之上增加的額外邊距，不允許任何浮動元素進入這個範圍內。
  3.要確保清除元素的底端與一個浮動元素的底端之間有一定空間，可以為浮動元素本身設定一個下外邊距
  4.為什麼要清除浮動:

  1. 塊狀元素，會鑽進浮動元素的下面，被浮動元素所覆蓋
  2. 行內元素，例如文字， 則會環繞在浮動元素的周圍，為浮動元素留出空間，
  3. 浮動元素的父元素坍縮

定位 position
值：static | relative| absoluate| fixed| inherit |
1.absolute
生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。
元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
fixed
生成絕對定位的元素，相對於瀏覽器視窗進行定位。
元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
relative
生成相對定位的元素，相對於其正常位置進行定位。
因此，”left:20” 會向元素的 LEFT 位置新增 20 畫素。
static 預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）
inherit 規定應該從父元素繼承 position 屬性的值

包含塊
關於定位的包含塊定義如下：
1.“根元素”的包含塊由使用者代理建立。在Html中，根元素就是html元素
2.對於一個非根元素，如果其position值是releative或static，包含塊則有最近的塊級框、表單元格或行內塊祖先框的內容邊界構成
3.對於一個非根元素，如果其position值是absoluate，包含塊設定為最近的position值不是static的祖先元素

溢位 overflow
值：visible | hidden | scroll | auto | inherit
1.visible 預設值。內容不會被修剪，會呈現在元素框之外。
hidden 內容會被修剪，並且其餘內容是不可見的。
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值

內容裁剪 clip
值：rect(top,right,bottom,left) | auto | inherit
1.clip 屬性剪裁絕對定位元素。當一幅影象的尺寸大於包含它的元素時會發生什麼呢？”clip” 屬性允許您規定一個元素的可見尺寸，這樣此元素就會被修剪並顯示為這個形狀。
2.對於一個絕對定義元素，在這個矩形內的內容才可見。出了這個剪裁區域的內容會根據 overflow 的值來處理。剪裁區域可能比元素的內容區大，也可能比內容區小。
3.rect(…)的值不是邊偏移，而是距元素左上角的距離

元素可見性 visibility
值：visible | hidden | collapse | inherit
1.visibility 屬性規定元素是否可見。
2.這個屬性指定是否顯示一個元素生成的元素框。這意味著元素仍佔據其本來的空間，不過可以完全不可見。值 collapse 在表中用於從表佈局中刪除列或行。
3.
值 描述
visible 預設值。元素是可見的。
hidden 元素是不可見的，此狀態下元素還會影響文件的佈局，好像它還可見一樣
collapse 當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的佈局。被行或列佔據的空間會留給其他內容使用。如果此值被用在其他的元素上，會呈現為 “hidden”。
inherit 規定應該從父元素繼承 visibility 屬性的值。

絕對定位
1.設定為絕對定位的元素框從文件流完全刪除，並相對於其包含塊定位，包含塊可能是文件中的另一個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種型別的框。
2.絕對定位元素的包含塊是最近的position值不是static的祖先元素
3.元素絕對定位時還會為其後代元素建立一個包含塊
4.如果文件可滾動，絕對定位會隨其滾動，只要絕對定位元素不是固定定位元素的後代，情況總是如此。

絕對定位元素的放置和大小
1.如果絕對元素left , right, top設定為auto，定位元素的頂端要相對於其未定位前本來的頂端位置對齊
2.如果一個絕對元素的大小在水平方向上過度受限，會忽略right
3.如果一個絕對元素的大小在垂直方向上過度受限，會忽略bottom

z軸上的位置 z-index
值：<integer> | auto | inherit
1.利用 z-index 可以改變元素相互覆蓋的順序
2.所有整數都可以用作 z-index的值，包括負數
3.一旦為一個元素設定了 z-index（不是auto），該元素就會建立自己區域性疊放上下文

固定定位
1.固定定位與絕對定位類似，只不過固定元素的包含塊是視窗。固定元素定位時，元素完全從文件流中刪除，不會相對於文件中任何部分的位置

相對定位
1.設定為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所佔的空間仍保留。
2.相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現在它所在的位置上。然後，可以通過設定垂直或水平位置，讓這個元素“相對於”它的起點進行移動。
3.如果將 top 設定為 20px，那麼框將在原位置頂部下面 20 畫素的地方。如果 left 設定為 30 畫素，那麼會在元素左邊建立 30 畫素的空間，也就是將元素向右移動。
4.注意，在使用相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其它框。