問答##
1 . 浮動的特征，影響#####
浮動模型也是一種可視化格式模型，浮動的框可以左右移動（根據float屬性值而定），直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣。浮動元素不在文檔的普通流中，文檔的普通流中的元素表現的就像浮動元素不存在一樣.
如果包含塊兒太窄無法容納水平排列的三個浮動元素,那么其它浮動塊兒向下移動,直到有足夠的空間,如果浮動元素的高度不同,那么向下移動的時候可能被卡住
浮動會讓元素脫離普通流, 如果浮動的元素后面有一個文檔流中元素,那么這個元素的框會表現的像浮動元素不存在,但是框的文本內容會受到浮動元素的影響,會移動以留出空間.用術語說就是浮動元素旁邊的行框被縮短,從而給浮動元素流出空間,因而行框圍繞浮動框，形成文字環繞的視覺效果。
| 對父元素的影響 | 子元素都浮動時，父元素高度為0，高度塌陷。 |
|---|---|
| 對其他浮動元素的影響 | 同一個方向的浮動元素：當一個浮動元素在浮動過程中碰到同一個方向的浮動元素時，它會緊跟在它們后面；反方向的浮動元素：互不影響，位于同一條水平線上，當空間不夠時會被擠下 |
| 對普通元素的影響 | 對于兄弟節點為塊元素來說位于浮動元素后面的元素可能會被浮動元素覆蓋 |
| 對文字的影響 | 文字會被擠出去，形成文字環繞浮動元素的效果。 |
| 對子元素的影響 | 當一個元素浮動時，在沒有清除浮動的情況下，它無法撐開其父元素，但它可以讓自己的浮動子元素撐開它自身，并且在沒有定義具體寬度情況下，使自身的寬度從100%變為自適應（浮動元素display:block）。其高度和寬度均為浮動元素高度和非浮動元素高度之間的最大值。 |
2 . 清除浮動是指#####
清除浮動指清除掉元素float屬性，解決浮動父容器高度塌陷問題，及 對其他元素造成的副作用。
清除浮動的方法
（1）如果我們想讓父元素在視覺上包圍浮動元素可以像下面這樣處理,在最后添加一個空div，對它清理。缺點是增加了一個無意義的標簽
（2）BFC清理浮動
兩種方案
雖然我們得出了一種瀏覽器兼容的靠譜解決方案，但這并不代表我們一定得用這種方式，很多時候我們的父容器本身需要position：absolute等形成了BFC的時候我們可以直接利用這些屬性了，大家要掌握原理，活學活用。總而言之清理浮動兩種方式
利用 clear屬性，清除浮動
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:left;
}
使父容器形成BFC
3 . 有幾種定位方式，分別是如何實現定位的，參考點是什么，使用場景是什么？#####
有一下幾種定位方式。
| 值 | 屬性 | 使用場景 |
|---|---|---|
| inherit | 規定應該從父元素繼承 position 屬性的值 | |
| static | 默認值,沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明） | |
| relative | 生成相對定位的元素，相對于元素本身正常位置進行定位,因此，left:20px 會向元素的 left 位置添加20px | |
| absolute | 生成絕對定位的元素，相對于static定位以外的第一個祖先元素（offset parent）進行定位,元素的位置通過 left, top, right 以及 bottom 屬性進行規定 |
定位機制
CSS有三種基本的定位機制：普通流，浮動，絕對定位(absolute,fixed)
- 普通流是默認定位方式，在普通流中元素框的位置由元素在html中的位置決定，這也是我們最常見的方式，其中position: static與position:relative屬于普通流的定位方式
- 浮動定位定位機制
- 絕對定位包括 absolute和 fixed
absolute 和 fixed
- 相對定位可以看作特殊的普通流定位，元素位置是相對于它在普通流中位置發生變化，而絕對定位使元素的位置與文檔流無關，也不占據文檔流空間，普通流中的元素布局就像絕對定位元素不存在一樣
- 絕對定位的元素的位置是相對于距離最近的非static祖先元素位置決定的。如果元素沒有已定位的祖先元素，那么他的位置就相對于初始包含塊html來定位demo。
- 因為絕對定位與文檔流無關，所以絕對定位的元素可以覆蓋頁面上的其他元素，可以通過z-index屬性控制疊放順序，z-index越高，元素位置越靠上。
- fixed固定定位，固定定位是絕對定位的一種，固定定位的元素也不包含在普通文檔流中，差異是固定元素的包含塊兒是視口（viewport）。
絕對定位寬度
絕對定位寬度是收縮的，如果想撐滿父容器，可以設置 width: 100%。
絕對定位和 BFC
絕對定位能形成 BFC 可用來清除浮動 可用來阻止外邊距合并
絕對定位垂直水平居中
4 . z-index 有什么作用? 如何使用?#####
定義和用法
z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
注釋：元素可擁有負的 z-index 屬性值。
注釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！
說明
該屬性設置一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區的軸。如果為正數，則離用戶更近，為負數則表示離用戶更遠。
5 . position:relative和負margin都可以使元素位置發生偏移?二者有什么區別#####
position:relative和負margin都能是元素位置發生偏移，但兩者的原理是完全不同的。
margin是外間距，position是定位，兩者毫無相似之處
position:relvation是相對于自身原來的位置偏移，但其他元素認為它還在原來的位置。
margin的兼容性更好。負margin的偏移會對其他元素產生影響，如果一個元素用負margin的方式偏移，可能會使相鄰元素的布局發生改變。
6 . BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明#####
BFC的全稱是 Block Format Content。
① BFC會阻止垂直外邊距（margin-top、margin-bottom）折疊。
按照BFC的定義，只有同屬于一個BFC時，兩個元素才有可能發生垂直Margin的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有阻擋(例如邊框，非空內容，padding等)就會發生margin重疊。
因此要解決margin重疊問題，只要讓它們不在同一個BFC就行了，但是對于兩個相鄰元素來說，意義不大，沒有必要給它們加個外殼，但是對于嵌套元素來說就很有必要了，只要把父元素設為BFC就可以了。這樣子元素的margin就不會和父元素的margin發生重疊
②BFC不會重疊浮動元素
③BFC可以包含浮動
我們可以利用BFC的第三條特性來“清浮動”，這里其實說清浮動已經不再合適，應該說包含浮動。也就是說只要父容器形成BFC就可以，簡單看看如何形成BFC
float為 left|right
overflow為 hidden|auto|scroll
display為 table-cell|table-caption|inline-block
position為 absolute|fixed
我們可以對父容器添加這些屬性來形成BFC達到“清浮動”效果
<div style="border: solid 5px #0e0; width:300px;overflow:hidden;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;"> </div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;"> </div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;"> </div>
</div>
BFC清理浮動局限性
使用BFC使用float的時候會使父容器長度縮短，而且還有個重要缺陷——父容器float解決了其塌陷問題，那么父容器的父容器怎么辦？overflow屬性會影響滾動條和絕對定位的元素；position會改變元素的定位方式，這是我們不希望的，display這幾種方式依然沒有解決低版本IE問題。
7 . 在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例#####
定義：外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。
合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。
產生條件：外邊距和并一般發生在父元素與子元素為同種BFC，且父元素沒有border，
當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合并。請看下圖：
當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合并。請看下圖：
阻止元素出現外邊距合并的方式
| 場景 | 方法 |
|---|---|
| 父子元素 | 給父元素設置一個padding值或者加上邊框，或者將父元素形成BFC。 |
| 相鄰元素 | ① 給相鄰元素設置float或inline-block屬性。②給相鄰元素分別包裹一層父元素，將這個父元素形成BFC。 |
只有普通文檔流中塊框的垂直外邊距才會發生外邊距合并。行內框、浮動框或絕對定位之間的外邊距不會合并。
代碼##
實現如下alert效果：http://js.jirengu.com/todufujiwu/1/edit?html,css,output
實現如下表單效果：http://js.jirengu.com/labacusedi/1/edit?html,css,output
實現如下模態框效果：http://js.jirengu.com/sobizoqowa/1/edit?html,css,output
實現如下導航欄效果：http://js.jirengu.com/keyudilagi/1/edit?html,css,output對
