浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?
- 浮動元素的特征：
（1）浮動元素會脫離正常的文檔流。
（2）浮動元素后面的塊級元素的內容會向此浮動元素的外邊距靠齊，但是邊框和背景卻忽略浮動元素而向上一個任意非浮動元素靠齊。
（3）浮動元素后面的內聯元素會向此浮動元素的外邊距靠齊。
- 對父容器的影響
對于其父元素來說，元素浮動之后，它脫離當前正常的文檔流，所以它也無法撐開其父元素，造成父元素的塌陷。
- 對其他浮動元素的影響
當一個浮動元素在浮動過程中碰到同一個方向的浮動元素時，它會緊跟在它們后面。當空間不夠時會被擠下
- 對普通元素的影響
塊級元素會忽視浮動元素的而占據它的位置，并且元素會處在浮動元素的下層（并且無法通過z-index屬性改變他們的層疊位置），但它的內部文字和其他行內元素都會環繞浮動元素。
內聯元素會環繞浮動元素排列。
- 對文字的影響
當一個元素浮動時，在沒有清除浮動的情況下，它無法撐開其父元素，但它可以讓自己的浮動子元素撐開它自身，并且在沒有定義具體寬度情況下，使自身的寬度從100%變為自適應（浮動元素display:block）。其高度和寬度均為浮動元素高度和非浮動元素高度之間的最大值。
清除浮動指什么? 如何清除浮動? 兩種以上方法
- box模型里使用了浮動屬性，導致父級box模型不能被撐開。產生了背景不能顯示，邊框不能撐開，margin padding設置值不能正確顯示等負作用。此時就需要清除浮動。
（1）
clear:both
（2）
BFC特性：可以包含浮動。也就是說只要父容器形成BFC就可以，簡單看看如何形成BFC。
- float為 left|right
- overflow為 hidden|auto|scroll
- display為 table-cell|table-caption|inline-block
- position為 absolute|fixed
（3）
.#:after{
content:"";
display:block;
clear:both;
有幾種定位方式，分別是如何實現定位的，參考點是什么，使用場景是什么？
| 值 | 屬性 |
|---|---|
| inherit | 規定應該從父元素繼承 position 屬性的值。 |
| static | 默認值,沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 |
| relative | 生成相對定位的元素，相對于元素本身正常位置進行定位,因此，left:20px 會向元素的 left 位置添加20px。 |
| absolute | 生成絕對定位的元素，相對于static定位以外的第一個祖先元素（offset parent）進行定位,元素的位置通過 left, top, right 以及 bottom 屬性進行規定。 |
| absolute相當于脫離了文檔流，與浮動元素的區別是：absolute對下面的文本不會產生影響，浮動元素會影響下面的文本。 | |
| fixed | 生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 left, top, right 以及 bottom 屬性進行規定。 |
| sticky | CSS3新屬性，表現類似position:relative和position:fixed的合體，在目標區域在屏幕中可見時，它的行為就像position:relative; 而當頁面滾動超出目標區域時，它的表現就像position:fixed，它會固定在目標位置。 |
z-index 有什么作用? 如何使用?
z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
該屬性僅適用于定位元素。即擁有 relative, absolute, fixed屬性的 position 元素
| 值 | 描述 |
|---|---|
| auto | 默認。堆疊順序與父元素相等。 |
| number | 設置元素的堆疊順序。 |
| inherit | 規定應該從父元素繼承 z-index 屬性的值。 |
position:relative和負margin都可以使元素位置發生偏移?二者有什么區別
- position:relative;：相對自己原本位置發生偏移，不影響其它普通流中元素的位置。
- 負margin：除了讓元素自身發生偏移還影響其它普通流中的元素。
BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
BFC的全稱是 Block Format Content。直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干。
生成BFC：
- float 為 left|right
- overflow 為 hidden|auto|scroll
- display 為 table-cell|table-caption|inline-block
- position 為 absolute|fixed
BFC作用：
- （1）BFC會阻止垂直外邊距（margin-top、margin-bottom）折疊。
按照BFC的定義，只有同屬于一個BFC時，兩個元素才有可能發生垂直Margin的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有阻擋(例如邊框，非空內容，padding等)就會發生margin重疊。
- 因此要解決margin重疊問題，只要讓它們不在同一個BFC就行了，但是對于兩個相鄰元素來說，意義不大，沒有必要給它們加個外殼，但是對于嵌套元素來說就很有必要了，只要把父元素設為BFC就可以了。這樣子元素的margin就不會和父元素的margin發生重疊。
（2）BFC不會重疊浮動元素，用于自適應兩欄布局。
（3）BFC可以包含浮動，清除內部浮動。
在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例。
- 當兩個塊元素垂直排列時，外邊距會合并。。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。
- 不合并情況：
（1）通過對父元素建立border，padding，或者間隔。
（2）創建BFC可使得兩者不合并。
（3）浮動元素不合并。
（4）絕對定位元素不合并。
（5）根元素不合并。
-
范例：
代碼1：http://js.jirengu.com/gikefocumo/1/
代碼2：http://js.jirengu.com/wecuzakiqu/1/
代碼3：http://js.jirengu.com/narijepeje/1/
代碼4：http://js.jirengu.com/quqokimeyu/1/
