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

• 浮動元素不在文檔的普通流中，可以通過設置float屬性值而左右移動，直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣才停止移動。
• 對父容器的影響：如果父容器的子元素都是浮動元素，那么父容器會失去高度，在浮動元素之外。
• 對其它浮動元素的影響：如果父容器寬度不夠無法容納水平排列的全部浮動元素，那么多出的浮動元素會向下移動，直到有足夠的空間，而如果浮動元素的高度不同，那么向下移動的時候可能會被卡住。
• 對普通元素的影響：普通元素會視浮動元素不見，占據浮動元素原有的位置，但會被浮動元素遮罩。
• 對文字的影響：文字會感知到浮動元素的存在，會留出空間，形成環繞效果。

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

• 清除浮動是指通過設置元素的clear屬性來清除設置浮動時帶來的不良影響。
• 方法1：在父容器的最后一個子元素后添加一個空div，并對其設置樣式：clear:both。
• 方法2： .clearfix{*zoom: 1;} .clearfix:after{content: ””; display: block; clear: both;}
• 方法3：利用BFC的特性

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

有6種定位方式：

• inherit：從父元素繼承；
• static：默認值，沒有定位，元素出現在正常的文檔流中。
• relative：相對定位。相對于元素本身正常位置進行定位，通過top、bottom、left、right屬性來設置偏移量。使用場景：為絕對定位設定參照物或對元素自身位置進行局部調整。
• absolute：絕對定位。相對于static定位以外的第一個祖先元素進行定位，若都沒有則以html標簽為參考進行定位。使用場景：當想讓元素參照特定參照物進行定位時使用。
• fixed：固定定位。生成絕對定位元素，相對于viewport進行定位。
• sticky：對象在常態時遵循普通流。它就像是relative和fixed的合體，當在屏幕中時按常規流排版，當卷動到屏幕外時則表現如fixed。

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

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

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

• position:relative;只相對自己原本位置發生偏移，不影響其它普通流中元素的位置。
• margin：除了讓元素自身發生偏移還影響其它普通流中的元素。

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的作用有：
  1. 解決margin重疊問題。所謂margin重疊是指處于同一個BFC的相鄰元素、嵌套元素，只要它們之間沒有阻擋（如：邊框、非空內容、padding等）就會發生margin重疊。這是只要讓其中一個元素生成新的BFC就能解決margin重疊問題。
  2. 清除浮動。因為BFC可以包含浮動，所以讓父容器生成新的BFC可以讓父容器在視覺上包圍了浮動的子元素，因而清除了浮動。

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

• 外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。
• 若想要外邊距不合并，可以把兩個元素分別放到不同的BFC中或者元素上加上border或者padding。
• 父子外邊距合并的例子：http://js.jirengu.com/bijomexuye/1/edit