一、浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?

• （對浮動元素）浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
• （對普通元素）由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
• （對父容器）如果父容器（包容塊）太窄無法容納水平排列的三個浮動元素，那么其它浮動塊下移，直到有足夠的空間；如果浮動元素高度不同，那么下移可能會被卡??；也會造成父容器高度塌陷。
• （對文字）浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。因此，創建浮動框可以使文本圍繞圖像，即文字可以感應浮動框。
  詳情示例請戳

二、清除浮動指什么? 如何清除浮動? 兩種以上方法

（1）解決浮動父容器高度塌陷問題
（2）清除浮動的方法

• 利用clear屬性來清除浮動，最常見clear：both清除左右兩邊的浮動
  .clearfix{
  *zoom:1;
  }
  . clearfix:after{
  content:"";
  display:block;
  clear:left;
  }
• 利用overflow來清除浮動，我們可以使用hiddent和auto值來清除浮動，但切記不能使用visible值（BFC清除浮動）
  .over-flow{
  overflow: auto; zoom: 1; //zoom: 1; 是在處理兼容性問題
  }
• :after 方法：（注意：作用于浮動元素的父親）
  .outer {zoom:1;} /==for IE6/7 Maxthon2==/
  .outer:after {clear:both;
  content:'.';
  display:block;
  width: 0;height:0;
  visibility:hidden;}
  擴展1，浮動的幾種影響
  擴展2，清除浮動的兩種常見方法

三、有幾種定位方式，分別是如何實現定位的，參考點是什么，使用場景是什么？

(1)position:static

默認值。沒有定位，元素出現在正常的流中

(2)position:relative

生成相對定位的元素，相對于其正常位置進行定位。因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。

(3)position:absolute

生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
元素框從文檔流完全刪除，元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。

(4)position:fixed

生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
使用場景：永遠在窗口頂部或底部的元素

(5)position:inherit

規定應該從父元素繼承 position 屬性的值

提示：相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。

四、z-index 有什么作用? 如何使用?

Z-index屬性決定了一個HTML元素的層疊級別。
當網頁上出現多個由position：relative、絕對定位（position：absolute）或固定定位（position：fixed）所產生的浮動層時，必然有層疊順序，這是z-index就起到了作用，值越大，優先級越高。
擴展：深入理解CSS中的層疊上下文和層疊順序

五、position:relative和負margin都可以使元素位置發生偏移?二者有什么區別

position:relative：只相對自己原本位置發生偏移，不影響其它普通流中元素的位置，即改變位置后，它的本體位置并沒有改變，瀏覽器中的其它元素感知的還是它原本的位置；
負margin改變位置后，本體隨之改變，其周邊普通流元素可能也會隨之改變

六、BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明

（1）（2）參考來源：請戳
（1）BFC（Block formatting contexts），翻譯過來就是塊級格式化上下文
（2）根據W3C的定義：浮動元素，絕對定位元素，非塊級盒子的塊級容器（例如inline-blocks，table-cells，and table-captions），以及overflow屬性值不是“ visible”（visible是overflow的默認值）的塊級盒子（視口除外），這些元素就會為他們的內容創建一個BFC。

（3）BFC布局規則：

• 內部的Box會在垂直方向，一個接一個地放置。
• Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊
• 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
• BFC的區域不會與float box重疊。
• BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
• 計算BFC的高度時，浮動元素也參與計算
  參考來源：請戳

（4）BFC的三個特性（作用）

• 會阻止垂直外邊距（margin-top，margin-bottom）合并
  • 按照BFC定義，只有同屬于一個BFC時，兩個元素才有可能發生垂直margin的重疊。包括相鄰元素，嵌套元素，只要他們周邊沒有發生阻擋（例如邊框，非空內容，padding等）就會發生，margin重疊
  • 因此，要解決重疊問題只需要使他們在不同的BFC就可以了。但是，相鄰元素意義不大，但對嵌套元素來說非常必要，只需設置父容器為BFC
  • 案例見第七點
• BFC不會重疊浮動元素

  • 兩欄布局的情況下

    
    
    浮動重疊.png
    
    
    BFC不會重疊浮動元素.png

• BFC可以包含浮動元素

  
  
  沒有包含浮動
  
  
  創建BFC，包含浮動

七、在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例

• 塊的頂部外邊距和底部外邊距有時被組合(折疊)為單個外邊距，其大小是組合到其中的最大外邊距，這種行為稱為外邊距塌陷(margin collapsing)，有的地方翻譯為外邊距合并。

• 發生外邊距塌陷的三種基本情況:

  • 相鄰的兄弟姐妹元素

    
    
    外邊距合并-相鄰情況

  • 塊級父元素與其第一個/最后一個子元素
    如果塊級父元素中，不存在上邊框、上內邊距、內聯元素、清除浮動
    這四條屬性（即不存在創建BFC的情況），那么這個塊級元素和其第一個子元素的上邊距就可以說”挨到了一起“。此時這個塊級父元素和其第一個子元素就會發生上外邊距合并現象，換句話說，此時這個父元素對外展現出來的外邊距將直接變成這個父元素和其第一個子元素的margin-top的較大者。

    
    
    外邊距合并-父子情況

  • 空塊元素
    <p style="margin-bottom: 0px;background:pink">這個段落的和下面段落的距離將為20px</p>
    <div style="margin-top: 20px; margin-bottom: 20px;"></div>
    <p style="margin-top: 0px;background:pink">這個段落的和上面段落的距離將為20px</p>

    
    
    空塊元素

• 即使外邊距為0，這些規則也仍舊生效。因此，無論父元素的外邊距是否為0，第一個或者最后一個子元素的外邊距會被父元素的外邊距"截斷"(根據上面的規則)。

• 當有負邊距存在時，合并后的外邊距將是最大正邊距加上最小負邊距（即負邊距中絕對值最大的一個）。
  參考來源：mdn,外邊距合并

• 解決辦法：

利用：絕對定位，float，inline-block，overflow（除visible值），table-cell可以阻止外邊距合并

相鄰合并-加inline-block

父子合并-加overflow

父子合并-加padding

父子合并-加邊框