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

浮動元素不在文檔的普通流中，它可以根據float屬性值而左右移動，直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣才停止移動。

• 對父容器的影響：如果父容器內的子元素是浮動元素，那么父容器會失去高度，形成父容器塌陷，在浮動元素之外。
• 對其它浮動元素的影響：如果包含塊太窄無法容納水平排列的全部浮動元素，那么其它浮動元素會向下移動，直到有足夠的空間，而如果浮動元素的高度不同，那么向下移動的時候可能會被“卡”住。
• 對普通元素的影響：普通元素感知不到浮動元素，繼而占據浮動元素原有的位置，但會被浮動元素遮罩。
• 對文字的影響：文字可感知到浮動元素，會留出空間，形成環繞的效果。

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

1. 空標簽清浮動:在父元素的子元素的最后添加一個沒有高度的空的塊標簽，并且設置屬性 clear:both;
2. 使父元素形成新的BFC，可以使用的屬性：

• overflow：hidden/auto/scroll
• display:inline-block
• float 等等

但是這類方法會帶來不同的副作用，需要考慮自身需求，去選擇合適的屬性去實現效果。

3. 使用偽元素清楚浮動。目前比較標準無副作用的實現方式：

.clearfix{
zoom:1;   /*此段是在確定IE6下也可實現效果*/
}
.clearfix:after{ 
content:"";
display:block;
visible:hidden;
clear:both;
}

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

定位的屬性：

這些屬性，比較常用的就是 relative；absolute；fiexd三個屬性

對于新屬性sticky

sticky

可以看到，他的兼容性比較差，所以一般不使用它實現效果，而是采用javascrip來實現。

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

因為絕對定位的元素脫離了普通流，所以絕對定位的元素可以覆蓋頁面上的其它元素。這時可以通過給元素設置z-index屬性來控制疊放順序，該屬性值越高，元素位置越靠上。

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

position:relative;只相對自己原本位置發生偏移，不影響其它普通流中元素的位置。

position:relative

margin：除了讓元素自身發生偏移還會影響其它普通流中的元素。

margin

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

BFC是塊級格式上下文。其定義是：浮動、絕對定位（絕對定位、固定定位）元素、塊級容器（如inline-block、 table-cell、table-caption）并不是塊級盒子，還包括哪些overflow屬性值取值visible以外的塊級盒子，會為它們的內容物創建一個新的塊級格式化上下文。對元素設置以下屬性就可以生成BFC：
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;
原理大致是這樣：
在沒有BFC的情況下，兩塊的margin會相互折疊。
代碼：

<div style="width: 200px;height: 200px;background: #cccccc;margin-bottom: 30px;"></div>
<div style="width: 200px;height: 200px;background: #333333;margin-top: 30px;margin-bottom:30px;">   </div>
<div style="width: 200px;height: 200px;background: #666666;margin-top: 50px;"></div>

如圖：

alt text

<div style="overflow: auto;width: 100%;">
    <div style="float: left;width: 100%;">
        <div style="margin-bottom: 30px;width: 100px;height: 100px;background-color: #cccccc;"></div>
    </div>
    <div style="float: left;width: 100%;">
        <div style="margin-top: 50px;width: 100px;height: 100px;background-color: #333333;"></div>
    </div>
</div>

結果如下：

Alt text

可以看到，上面示例中的上面灰色div和下面黑色div的margin并沒有重疊，這是因為那兩個float的父盒子在為它下面的盒子創建了一個BFC，從而將float盒子里面的子盒子給隔離了起來，因此也就不會margin折疊了，這只是創建BFC的一個方法，其它的還有overflow:hidden等，而在這個BFC下的盒子都是遵循BFC的布局規則的。
然后，當塊級盒block-level box外層沒有BFC作保護，有margin折疊時，是這樣的：

而當塊級盒block-level box外層有BFC作保護時(比如給下圖灰色邊框線盒子一個float:left)，則是這樣的：

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

外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。
（1）兩個兄弟元素在垂直方向上合并外邊距，取較大值進行合并。

#d1 {
  width:100px;
  height:100px;
  margin-bottom:20px;
}
#d2 {
  width:100px;
  height:100px;
  margin-top:10px;
}

這時兩個div在垂直距離上的外邊距進行了合并，合并后的值是20px。

（2）父子元素間沒有阻擋（如：邊框、非空內容、padding等）時發生上和/或下外邊距合并。
例：

<div class=”parent”>
    <div class=”child”>
    </div>
</div>

.parent{
    width: 200px;
    height: 100px;
    margin-top:10px;
    background-color: red;
}
.child{
       width: 100px;
       height: 100px;
       margin-top:30px;
       background-color: yellow;
 }

這時就會發生合并。合并后的外邊距是30px。

關于外邊距合并：

外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。
合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。

• 當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合并：

  
  
  CSS外邊距合并的問題

代碼實驗

• 當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合并：

  
  
  CSS外邊距合并的問題

• 外邊距甚至可以與自身發生合并
  假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合并：

  
  
  自身發生合并

  如果這個外邊距遇到另一個元素的外邊距，它還會發生合并：

  
  
  自身發生合并
  這就是一系列的段落元素占用空間非常小的原因，因為它們的所有外邊距都合并到一起，形成了一個小的外邊距。

外邊距合并的意義：

外邊距合并初看上去可能有點奇怪，但是實際上，它是有意義的。以由幾個段落組成的典型文本頁面為例。第一個段落上面的空間等于段落的上外邊距。如果沒有外邊距合并，后續所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。

外邊距合并的意義

需要注意的是：只有普通文檔流中塊框的垂直外邊距才會發生外邊距合并。行內框、浮動框或絕對定位之間的外邊距不會合并。
參考文獻

代碼題

代碼1
代碼2
代碼3
代碼4