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

浮動元素會脫離普通文檔流，直到碰到父元素邊框；
<strong>對父容器影響</strong>：父容器的高度會塌陷，如果子元素全部浮動，視覺上看父容器沒有包住浮動元素；
<strong>對其他浮動元素影響</strong>：浮動元素會水平排列，如果包含塊太小，浮動元素會向下移動，若浮動元素高度不同會卡住；
<strong>對普通元素影響</strong>：普通元素位置會變化，或者被浮動元素覆蓋；
<strong>對文字影響</strong>：文字能感知浮動元素存在，會圍繞浮動元素

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

清除浮動是解決元素浮動后出現的問題；
方法：
1.在相同父容器最后添加一個空div,設置clear：both清理；這個方法會增加無意義的標簽；
2.BFC清理浮動,利用BFC特性達到清除浮動的效果
局限性：BFC使用float時候會使父容器長度縮短，而且父容器的父容器也需要float；overflow屬性會影響滾動條和絕對定位元素；position會改變元素定位方式；display低版本IE不支持問題。
3.利用css特性清除浮動

.clearfix{
        zoom:1;
  }
.clearfix:after{
        content:"";
        display:block;
        clear:both;
   }

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

• static，默認值，沒有定位，元素出現在正常的文檔流中（設置top、bottom、left、right、z-index無效），由元素在html中的位置決定位置；
• relate，相對定位，使用position：relation，通過設置垂直或水平位置實現定位，相對元素本身移動，無論元素是否移動都占據原來空間；
• absolute，絕對定位，相對于距離最近的非static祖先元素位置決定，如果沒有已定位的祖先元素，那么相對于初始html定位，決定定位元素脫離文檔流，不占據空間，可以設置z-index屬性控制疊放順序，值越高，位置越上；
• fixed，生產絕對定位，相對于瀏覽器窗口定位

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

z-index設置元素層疊順序，如果想讓一個元素位置在前面，可以設置z-index值控制，z-index值越高，位置越上。

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

兩者都可以使元素偏移，position：relative偏移后元素占據原來空間，不影響其他元素位置而負margin不占據原來空間，脫離普通文檔流。

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

BFC是塊級格式化上下文；對元素設置浮動、絕對定位（絕對定位、固定定位）元素、塊級容器（如inline-block、 table-cell、table-caption），overflow取值visible以外的塊級盒子，會生產BFC。
BFC特性：
1.會阻止外邊距折疊；
2.不會重疊浮動元素；
3.包含浮動元素。
因為以上三個特性，BFC可以解決外邊距重疊問題，可以清除浮動。

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

當兩個垂直外邊距相遇時，會形成一個外邊距，合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。讓兩個相鄰的元素在兩個不同的BFC里，這樣可以阻止外邊距合并。
父子外邊距合并：

Paste_Image.png

外邊距合并