浮動
CSS允許浮動任何元素。
浮動元素
首先，會以某種方式將浮動元素從文檔的正常流中刪除，不過它還是會影響佈局。一個元素浮動時，其他內容會“環繞”該元素。
浮動元素的外邊距不會與其他元素的外邊距合併。
浮動的詳細內幕
包含塊，浮動元素的包含塊是其最近的塊級祖先元素。
浮動元素會生成一個塊級框，不論元素本身是什麼。它會像塊級元素一樣擺放和表現。對浮動元素聲明 display: block也不是不可能，不過沒有必要這麼做。
浮動元素要遵守的規則：
- 浮動元素的左（或右）外邊界不能超出其包含塊的左（或右）內邊界。
- 浮動元素的左（或右）外邊界必須是源文檔中之前出現的左浮動（或右浮動）元素的右（左）外邊界，除非後出現浮動元素的頂端在先出現浮動元素的底端下面。這條規則可以防止浮動元素彼此“覆蓋”。如果一個元素向左浮動，而另一個元素已經在那個位置，後放置的元素將挨着前一個浮動元素的右外邊界放置。不過，如果一個浮動元素的頂端在所有之前浮動圖像（元素）的底端下面，它可以一直浮動到父元素的左內邊界。
- 左浮動元素的右外邊界不會在其右邊右浮動元素的左外邊界的右邊。一個右浮動元素的左外邊界不會在其左邊任何左浮動元素的右外邊界的左邊。 這條規則可以防止浮動元素相互重疊。如果寬度不夠，它會要求第二個圖像向下浮動，直到其頂端在左浮動圖像的底端之 下。
- 一個浮動元素的頂端不能比其父元素的內頂端更高。
- 如果一個浮動元素在兩個正常元素塊之間，放置這個浮動元素時就好像在兩個元素之間有一個塊級父元素。這個浮動元素浮動在塊級父元素中。這樣防止浮動元素的頂端超過上面那個元素的底端。
- 浮動元素的頂端不能比之前所有浮動元素或塊級元素的頂端更高。
- 如果源文檔中一個浮動元素之前出現另一個元素，浮動元素的頂端不能比包含該元素所生成框的任何行框的頂端更高。這個規則進一步限制了元素的向上浮動，不允許元素浮動到包含該浮動元素之前內容的行的頂端之上。假設一個段落的正中間有一個浮動圖像。這個圖像頂端最高只能放在該圖像所在行框的頂端。
- 左（或右）浮動元素的左邊（右邊）有另一個浮動元素，前者的右外邊界不能在其包含塊的右（左）邊界的右邊（左邊） 。也就是說，浮動元素不能超出其包含元素的邊界，除非它太寬，本身都無法放下，這就能防止出現以下情況，即多個浮動元素出現在一個水平 行上，遠遠超出其包含塊的邊界，相反，如果浮動元素出現在另一個浮動元素的旁邊，而因此可能導致超出包含塊的話，實際上這個浮動元素 會向下浮動到之前浮動元素下面的某一點。
- 浮動元素必須儘可能高地放置。
- 左浮動元素必須向左儘可能遠，右浮動元素則必須向右儘可能遠。位置越高，就會向右或向左浮動得越遠。
實用行爲
當父元素的高度比其中的浮動元素小的時候，會發生什麼呢。
下面這個例子：
<div id="float1">
不夠高的div裏有個高高的浮動元素
<div></div>
</div>
<h3>這個標題也會受到衝出來的浮動div的影響</h3>
#float1{
background-color: #1f7e9a;
color:yellowgreen;
//overflow: hidden;
//float:left;
div{
float:left;
width:20px;
height:200px;
margin-left: 30px;
background-color: #ac2925;
}
}
#float1 + h3 {
background-color: #b06d0f;
color: #2aabd2;
}這時裏面的div會衝出父級div向下延伸。下面的元素也會受到影響。這裏的h3，雖然總長度還是會填滿它的父級div，但是其中的內容卻被向右擠了。這是由於浮動元素同時存在於流內和流外，對流內的元素還是有一定的影響，影響的大原則就是使各個元素的內容不互相覆蓋。
這個情況看起來特殊其實很普遍，很多時候一個div裏全是浮動的元素，那麼這個div的高度其實是0，也就意味着這個div下面的元素一定會受到浮動元素的影響。
有兩種方法使不夠高的父元素來變高包裹住浮動的子元素。就是分別把上面的兩句註釋取消掉。
第一個會完美的結束浮動，div包裹住所有浮動的元素，以後的元素不會受到影響。
第二個是一個規則，是CSS2.1澄清的浮動元素行爲的一個方面：浮動元素會延伸，從而包含其所有後代浮動元素。
負外邊距
負外邊距可以讓浮動元素顯示在父元素的外面，看起來違反了上面的規則，其實並沒有。
這裏就出現了一個問題，如果你將元素的上外邊距負的很大，那就意味着一定會影響到已經顯示完成的元素們。CSS1和2都明確規定，這裏並不需要重繪已經繪製好的元素們。一般用戶代理的處理方式都是直接將浮動的div繪製在之前已經顯示了的元素的下面。
浮動元素比父元素更寬
在這種情況下，浮動元素會超出右或左內邊界，從而儘可能正確地顯示，究競是超出右內邊界還是左內邊界，取決於元素以何種方式浮動。
浮動元素，內容和重疊
如果一個浮動元素與正常流中的內容發生重疊會怎樣呢？
例如，如果一個浮動元素在內容流過的邊上有負外邊距（例如，右浮動元素上的左外邊距爲負）就會發生這種情況。
CSS2.1明確瞭如下規則：
- 行內框與一個浮動元素重疊時，其邊框、背景和內容都在該浮動元素“之上”顯示
- 塊框與一個浮動元素重疊時，其邊框和背景在該浮動元素“之下”顯示，而內容在浮動元素“之上”顯示
- 重疊與元素出現在文檔中的順序無關
以上這些在下面這個例子裏都有體現：
<div id="float1">
不夠高的div裏有個高高的浮動元素
<div></div>
</div>
<h3>這個標題也會受到衝出來的浮動div的影響,塊級元素與行內元素重合時</h3>
<span>行內元素與浮動元素重合時</span>
#float1{
background-color: #1f7e9a;
color:yellowgreen;
//overflow: hidden;
//float:left;
div{
float:left;
width:150px;
height:200px;
margin-left: 30px;
margin-top:-10px;
margin-right:-10px;
background-color: #ac2925;
}
}
#float1 + h3 {
background-color: #b06d0f;
color: #2aabd2;
}
#float1 + h3 + span {
background-color: #b06d0f;
color: #2aabd2;
border: 2px dashed #ac2925;
}清除
你可能並不總是希望內容流過浮動元素，某些情況下，可能要特意避免這種行爲。
如果你的文檔分組爲小節，可能不希望一個小節的浮動元素浮動到另一個小節中。在這種情況下，你希望將每小節的第一個元素設置爲禁止浮動元素出現在它旁邊。如果這個小節的第一個元素可能放在一個浮動元素旁邊，則會將這個元素向下推，直到出現在浮動元素的下面，而且所有後續內容都
在其後面出現。這樣就消除了任何浮動元素對這個元素的影響。
在某個元素上使用clear屬性可以做到這一點，left | right | both | none | inherit。
這個屬性只能應用於塊級元素。
在CSS1和CSS2中，clear工作如下，它會增加元素的上外邊距，使之最後落在浮動元素的下面，這實際上會忽略爲清除元素頂端設置的外邊距寬度。會被改成是將元素下移足夠遠（使內容區在浮動元素下邊界的下面）所需的任何長度。
在CSS2.1中，引入了一個清除區域。清除區域是在元素上外邊距之上增加的額外間隔，不允許任何浮動元素進入這個範圍內。這意味着元素設置clear屬性時，它的外邊距並不改變。之所以會向下移是這個清除區域造成的。
這裏會有兩種情況，一種是你的上外邊距本身就很大，已經讓你的元素在浮動元素之下了，那你的元素是不會受到浮動元素的影響的，clear這時無關緊要。
另一種是你的上外邊距並不夠大，那clear就會增加這個額外的區域，直到你的元素剛好不被浮動元素影響，這時你的元素剛好在浮動元素的下面，你的上外邊距其實起不到什麼作用。
你要是希望你的元素清除浮動後能確定的與浮動元素至少有多少距離，就在浮動元素的下面加下外邊距吧，這樣浮動框大小本身就增加了，clear會把這點考慮進去。
定位
定位的類型
通過position屬性可以選擇4種不同類型的定位，這會影響元素框生成的方式。
static | relative | absolute | fixed | inherit
默認值爲static。可應用於所有元素。
static
元素框正常生成：塊級元素生成一個矩形框，作爲文檔流的一部分，行內元素則會創建一個或多個行框，置於其父元素中。
relative
元素框可以偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。
absolute
元素框從文檔流完全刪除，並相對於其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊，後面另說。元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
fixed
元素框的表現類似於將position設置爲absolute，不過其包含塊是視窗本身。
包含塊
還記得之前浮動元素的包含塊嘛，對於浮動元素，其包含塊定義爲最近的塊級祖先元素。
定位的情況稍微複雜些：
- “根元素”的包含塊（也稱爲初始包含塊）由用戶代理建立，在HTML中，根元素就是html元素，不過有些瀏覽器會使用body作爲根元素。在大多數瀏覽器中，初始包含塊是一個視窗大小的矩形。
- 對於一個非根元素，如果其position值是relative或static，包含塊則由最近的塊級框、表單元格或行內塊祖先框的內容邊界構成。
- 對於一個非根元素，如果其position值是absolute，包含塊設置爲最近的position值不是static的祖先元素(可以是任何類型)。這個過程如下：
如果這個祖先是塊級元素，包含塊則設置爲該元素的內邊距邊界，換句話說，就是由邊框界定的區域。
如果這個祖先是行內元素，包含塊則設置爲該祖先元素的內容邊界。
如果沒有符合條件的祖先，元素的包含塊定義爲初始包含塊。
偏移屬性
偏移屬性來描述定位元素的外邊距邊界相對於其包含塊的偏移。
top、right、bottom、left
可能的值有：（length）| （percentage） | auto | inherit
除了position爲static的元素不能使用，其他的都會有效果。
其中百分數值是相對於包含塊的高度或寬度來說的。
它們可以是負值，會把元素定位在內容框外。
寬度和高度
儘管有時設置一個元素的寬度和高度很重要，但對於定位元素來說則不一定必要。如果使用top、right、bottom和left來描述元素4個邊的放置位置，那麼元素的高度和寬度將由這些偏移隱含確定。
可以限制寬度和高度，使用min-width、min-height、max-width、max-height。這兩個屬性可應用於除了非替換行內元素和表元素以外的所有元素。
絕對定位
這裏介紹絕對定位的一些細節。
包含塊和絕對定位元素
元素絕對定位時，會從文檔流中完全刪除。然後相對於其包含塊定位，其邊界根據偏移屬性（top、left等）放置，定位元素不會流入其他元素的內容，反之亦然。這說明，絕對定位元素可能覆蓋其他元素，或者被其他元素覆蓋。
絕對定位元素的放置和大小
如果一個元素使用4個偏移屬性來定位會發生什麼 情況？瀏覽器會根據包含塊的大小和定位元素的偏移量來自動計算元素的寬高。但是這樣做之後，再試圖設置一個顯式的高度和寬度會怎麼樣呢？
這些值可能是衝突的，那就意味着至少一個值會被忽略。right和bottom會被首先忽略，一般這就夠了。
自動邊偏移
在將某個（除bottom）任意的偏移量設置爲auto時，定位元素會相對於其未定位前本來的位置放置，也就是元素在正常流中原本的位置（假設元素“position”屬性爲“static”時元素的位置）。
不過要注意的是，這時元素已經被從文檔流中刪掉了，雖然它會被定位到原來的位置，但是會影響後面元素的佈局。
非替換元素的放置和大小
考慮一個定位元素的寬度和水平放置。這可以表示爲一個等式： left+margin-left+border-left-width+padding-left+width+padding-right+border-right- width+margin-right+right=包含塊的width。
在設置的規則不夠強的時候，會根據一些規則計算剩下的值。
- 如果left、width和right都設置爲auto：左邊界會置於其靜態位置。元素的width設置爲“收放得正好合適”，這說明該元素的內容區寬度恰好只能包含其內容而沒有多餘空間。
- 左右外邊距都設置爲auto，而left、width和right不是auto：左右外邊距會設置爲相等的值。
- 如果只有一個值爲auto則會自動計算這個值
- 如果規則相互衝突，重設right
例子：
<div style="position: relative; width: 25em; border: 1px dotted;">
An absolutely positioned element can have its content
<span style="position: absolute; top: 0; left: 0; right: auto; width:auto; background: silver;">
shrink-wrapped
</span>
thanks to the way positioning rules work.
</div>
<div style="position: relative; width: 25em; border: 1px dotted;">
An absolutely positioned element can have its content
<span style="position: absolute; top: 0; left: 3em; right: 1em; width: 10em; margin: 0 auto; background: silver;">
shrinkwrapped
</span>
thanks to the way positioning rules work.
</div>
<div style="position: relative; width: 25em; border: 1px dotted;">
An absolutely positioned element can have its content
<span style="position: absolute; top: 0; left: 1em; right: 1em; width: 10em; margin-left: 1em; margin-right: 1em; background: silver;">
shrink-wrapped
</span>
thanks Co the way positioning rules work.
</div>垂直情況下情況大致相同，這裏有個不錯的特點，就是外邊距的auto可以用來垂直居中了。不過這種方法只針對height固定的元素有效。
<div id="position-absu-vertical">
<div>This is paragraph text</div>
</div>
#position-absu-vertical{
height:200px;
position: relative;
background-color: #000;
div{
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
margin: auto auto;
height: 50px;
width:50px;
background-color: #fff;
}
}替換元素的放置和大小
替換元素固有高度和寬度，除非創作人員顯式的修改，否則大小不會改變。
在高度或寬度未給定或爲auto時，就會自動使用使用替換元素本該有的寬高。
其他的規則基本和非替換元素一樣的。
固定定位
固定定位與絕對定位很類似，只不過固定元素的包含塊是視窗。固定定位時，元素會完全從文檔流中去除，不會有相對於文檔中任何部分的位置。
相對定位
如果相對定位一個元素，它會立即爲其所有子元素建立一個新的包含塊。這個包含塊對應於該元素原本所在的位置。設置的偏移量也是針對原本的位置的相對偏移量。當元素相對定位時，它會從其正常位置移走，不過，原來所佔的空間並不會因此消失。
如果相對元素的偏移量因爲過度受限而發生衝突，則會將一個值會重置爲另一個值的相反數。bottom總是等於-top，right總是等於-left。
Z軸上的放置
對於所有定位，最後都不免遇到這樣一種情況：兩個元素試圖放在同一個位置上。顯然，其中一個必須蓋住另一個。不過，如何控制哪個元素放在“上層”呢？這就引人了屬性z-index。
有較高z-index值的元素比z-index值較低的元素離讀者更近。這會導致有較高z-index值的元素覆蓋其他元素。
所有整數都可以用作爲z-index的值，包括負數。如果爲元素指定一個負z-index值，會將其移到到離讀者更遠的位置。也就是說會移到疊放棧的更低層。
—旦爲一個元素指定了z-index值，該元素就會建立自己的局部疊放上下文。這意味着，元素的所有後代相對於該祖先元素都有其自己的疊放順序。這非常類似於元素建立新包含塊的方式。比如一個z-index爲7的元素的z-index爲－1的子元素和一個z-index爲6的元素的z-index爲10的子元素重疊了。那麼是z-index爲－1的在上面。
還有一個規則，要求元素絕對不會迭放在其疊放上下文的背景之下。如果一個元素的子元素z-index爲負，則會被這個元素的內容覆蓋，不被背景覆蓋。
元素可見性
visibility：visible | hidden | collapse | inherit
hidden時，這個元素只是不可見了，還是會佔用原來它在文檔中的位置。這是與display的顯著區別。
collapse在表中顯示用到的，用於非表元素時collapse與hidden含義相同。
內容溢出
如果一個元素的內容對於元素大小來說過大，就有可能溢出元素本身。對於這種情況，有一些候選解決辦法，CSS2允許你從中選擇。
當一個元素被固定爲某種特定大小，但是元素中的內容過大，就可以使用overflow來控制這種情況。
overflow有這麼幾個值：visible | hidden | scroll | auto | inherit
可以應用於塊級元素和替換元素。默認爲visible。
- visible表明，元素的內容在元素框之外也可見。一般地，這會導致內容超出其自己的元素框，但不會改變框的形狀。
- 設置爲scroll，元素的內容會在元素框的邊界處剪裁，溢出的部分將無法直接看到，Web瀏覽器將使用一個滾動條（或類似的東西）或者使用另外某種方法呈現剩下的內容而不會改變元素本身的形狀。要注意的是，如果瀏覽器採用的是滾動條的實現方式，那麼即使元素的大小足夠顯示其內容，也會出現不可點的滾動條，這是爲了防止動態環境中滾動條出現消失而可能帶來的佈局問題。
- 設置爲hidden，元素的內容會在元素框的邊界處剪裁，不過不會提供滾動接口使用戶訪問超出剪裁區域的內容。