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

• 浮動元素會脫離文檔流（不會對普通元素的布局產生影響）。
• 向左/向右浮動，直到碰到父元素或者另一個浮動元素（如果父容器寬度不夠無法容納水平排列的浮動元素,那么其它浮動塊兒向下移動,直到有足夠的空間,如果浮動元素的高度不同,那么向下移動的時候可能被卡住）。
• 普通流中的元素無法感知到浮動元素（會出現被浮動元素覆蓋的現象），但是框的文本內容會受到浮動元素的影響,會移動以留出空間給浮動元素（產生文字環繞效果）。
• 浮動會導致父元素高度坍塌。

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

浮動會導致父元素高度坍塌（因為浮動元素脫離了文檔流，并不占據文檔流的位置，自然父元素也就不能被撐開，所以沒了高度），為了解決高度坍塌問題，就要清除浮動：

• clear屬性:只要在最后添加一個div，設置clear=both樣式。缺點是增加了一個無意義的標簽。
• 對父容器設置適合高度，缺點是需要手動計算高度。
• 使父容器形成BFC，對父容器設置

float: left/right
overflow: hidden/auto/scroll
display: table-cell/table-caption/inline-block
position: absolute/fixed

但是使用float的時候會使父容器長度縮短，而且還有個重要缺陷——父容器float解決了其塌陷問題，那么父容器的父容器怎么辦？overflow屬性會影響滾動條和絕對定位的元素；position會改變元素的定位方式

• 通用的方法

.clearfix{
     *zoom:1;
 }
 .clearfix:after{
     content:"";
     display:block;
     clear:left;        /*方法1*/
 }
  .clearfix{
   *zoom:1;
 }
 .clearfix:after{
   content:"";
     display:table;
     clear:both;        /*方法2*/
 }

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

普通流

• position: static是默認值，從左到右，從上至下排列
• position: relative元素位置是相對于它在普通流中的位置發生變化（元素仍然保持其未定位前的形狀，它原本所占的空間仍保留,用于對元素的微調、配合絕對定位來使用)

絕對定位（應用場景：彈窗，滾動圖按鈕等）

• position: absolute，將該元素從文檔流中刪除，原來的占位不再存在，相對于距離最近的非static祖先元素位置定位。如果元素沒有已定位的祖先元素，那么他的位置就相對于初始包含塊html來定位demo，不論該元素為塊級元素還是內聯級元素，定位后該元素將以塊級元素的形式顯示。
• position: fixd,效果類似absolute只是是相對于當前視窗定位。

浮動定位（應用場景：讓文字圍繞起來）

浮動的元素可以在左右移動，直到它的外邊框邊緣碰到包含塊或另一個浮動元素的邊緣。浮動的元素離普通流。如果包含塊太窄，無法容納水平排列的浮動元素，那么其他浮動元素向下移動，直到有足夠多的空間。如果浮動元素的高度不同，那么當它們向下移動時可能會被其他浮動元素卡住。行內元素會圍繞著浮動框排列

4. z-index 有什么作用? 如何使用?

z-index 屬性設置元素的堆疊順序。
擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面（元素可擁有負z-index 屬性值；z-index 僅能在定位元素上奏效；非同級關系和非父子關系定位元素之間的堆疊順序，要向上追溯到其為兄弟關系的父元素上，先比較其z-index值，只有父輩元素中的z-index值較大的后代子元素才能超過z-index值較小的父輩元素及其子孫元素。

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

position:relative發生偏移后元素仍然保持其未定位前的形狀，它原本所占的空間仍保留，并且不會影響其他元素；而負margin則會影響其他元素。

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

塊級格式化上下文。
浮動，絕對定位元素，inline-blocks, table-cells, table-captions,和overflow的值不為visible的元素，（除了這個值已經被傳到了視口的時候）將創建一個新的塊級格式化上下文。
元素滿足下列任何一個條件即可生成BFC

• float的值不為none
• position的值不為static或者relative
• display的值為 table-cell, table-caption, inline-block, flex, 或者 inline-flex
• overflow的值不為visible
  通過創建一個新的BFC我們可以防止外邊距折疊；使用BFC來包含浮動元素（即清除浮動）；使用BFC來防止文字圍繞浮動元素。

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

當兩個垂直外邊距相遇時，它們將形成一個外邊距。

合并規則：

• 兩個margin都是正值的時候，取兩者的最大值；
• 當 margin 都是負值的時候，取的是其中絕對值較大的，然后，從0位置，負向位移；
• 當有正有負的時候，先取出負 margin 中絕對值中最大的，然后，和正 margin 值中最大的 margin 相加。
• 所有毗鄰的margin要一起參與運算，不能分步進
  被非空內容，padding，border，clear 分隔開，或使用BFC可以阻止外邊距合并。
  例子
  代碼
  alert
  表單
  模態框
  導航欄