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

浮動模型也是一種可視化格式模型，浮動的框可以左右移動（根據(jù)float屬性值而定），直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣。浮動元素不在文檔的普通流中，文檔的普通流中的元素表現(xiàn)的就像浮動元素不存在一樣.

• 對父容器影響：如果父容器中的元素都是浮動元素，那么父容器會失去它的高度，在瀏覽器的表現(xiàn)為，父元素并未包裹住子元素。
• 對其他浮動元素的影響：浮動元素會按照順序排列下去，若父容器剩余的寬度不夠放下下一個浮動元素，那么它將向下移動，若是高度不同，在下移的過程中，浮動元素還有可能會被卡住。
• 對普通元素的影響：普通元素無法感知到浮動元素，會被浮動元素遮擋
• 對文字的影響：文字可以感知浮動元素，會環(huán)繞浮動元素排列

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

清除浮動是指解決浮動父容器高度塌陷問題
如何清除浮動：

• 在浮動元素的后面添加一個空的元素，并設置其樣式為 clear: both;，但是會使HTML多出一個無意義的標簽，影響結(jié)構(gòu)；
• 在浮動元素的后面添加一個偽元素，通過設置 :after來清除浮動

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

• 讓浮動元素的父元素形成BFC，消除浮動對后續(xù)元素的影響。

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

CSS有三種基本的定位機制：普通流，相對定位和絕對定位

• 普通流是默認定位方式，在普通流中元素框的位置由元素在html中的位置決定，元素position屬性為static或繼承來的static時就會按照普通流定位，這也是我們最常見的方式
• 相對定位比較簡單，對應position屬性的relative值，如果對一個元素進行相對定位，它將出現(xiàn)在他所在的位置上，然后可以通過設置垂直或水平位置，讓這個元素相對于它自己移動，在使用相對定位時，無論元素是否移動，元素在文檔流中占據(jù)原來空間，只是表現(xiàn)出來的位置會改變
• 絕對定位是通過absolute和fixed實現(xiàn)，absolute的參考點是絕對定位元素相對于距離最近的非static元素祖先元素決定的；如果沒有已定位的祖先元素，則是由html決定；fixed參考點是視口；絕對定位更多是使用在相對于其它元素進行定位的時候，脫離文檔流。

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

因為絕對定位的元素脫離了文檔流，可以覆蓋在頁面上其他元素的上方，z-index屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面

• z-index值可為負數(shù)
• z-index 僅能在定位元素上奏效（非 position: static;）

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

• 使用負margin，使元素位置發(fā)生了偏移，原位置會被其他后續(xù)元素占據(jù)，影響其他元素的位置。
• 使用position: relative，元素在文檔中的位置還是保留的，不會影響其他元素的位置，只是視覺上的偏移

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

BFC，塊級格式化上下文（Block Format Content），創(chuàng)建了BFC的元素就是一個獨立的盒子，盒子里布局不受外部影響，也不影響外部元素的布局
如何生成BFC：

• float為 left|right
• overflow為 hidden|auto|scroll
• display為 table-cell|table-caption|inline-block
• position為 absolute|fixed
  作用：
• BFC會阻止垂直外邊距（margin-top、margin-bottom）折疊
  只要讓它們不在同一個BFC就行了，但是對于兩個相鄰元素來說，意義不大，沒有必要給它們加個外殼，但是對于嵌套元素來說就很有必要了，只要把父元素設為BFC就可以了。這樣子元素的margin就不會和父元素的margin發(fā)生重疊 示例
• BFC不會重疊浮動元素 示例
• BFC可以包含浮動 示例

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

• 兩個在普通文檔流中相鄰的元素外邊距相遇的時候發(fā)生合并。這個相鄰可以是父子關系相鄰，兄弟關系相鄰，一個元素內(nèi)部沒有東西，自身的上下邊距相遇時也會發(fā)生外邊距合并。只有普通文檔流中塊級元素的垂直外邊距才會發(fā)生外邊距合并。內(nèi)聯(lián)元素、浮動元素或絕對定位元素之間的外邊距不會合并。
• 如何合并：會選取較大值進行合并. 合并的結(jié)果： 兩個外邊距都是正數(shù)，取兩者之中的較大者；兩個外邊距都是負數(shù)，取兩者之間絕對值較大者；當兩個外邊距一正一負時，取兩者的和。
• 不讓相鄰元素外邊距合并的方法：
  1.被非空內(nèi)容、padding、border 或 clear 分隔開。
  2.不在一個普通流中或一個BFC中。
  3.margin在垂直方向上不毗鄰。
  父子外邊距合并范例

代碼

1.alert效果
2.表單效果
3.模態(tài)框效果
4.導航欄效果