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

特征：

1. 浮動元素的框可以向左或者向右移動，直到它的外邊緣碰到父元素包含框或者另一個浮動元素的邊框為止；
2. 浮動元素不在文檔普通流之中，因此文檔普通流中的塊級元素感知不到浮動元素的存在；
3. 在css中任何元素都可以浮動，浮動元素會生成一個塊級框，而不論該元素本身是什么元素

對父容器的影響：
浮動元素脫離文檔流向左或者向右移動，直到邊框碰到父元素的邊緣,若父元素沒有設置高度，則父元素高度塌陷，高度為0；

這個是父元素沒有設置高度

這個父元素設置了高度

demo

對普通元素的影響
普通元素感知不到浮動元素的存在，但是普通元素的文字會受到影響；由于普通元素感知不到浮動元素，所以它會占據(jù)浮動元素的位置，但是浮動元素的層級比普通元素高，因此時長發(fā)生浮動元素掩蓋在普通元素上的情形。

普通元素被掩蓋

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

清除浮動：清除浮動指的是解決浮動元素父容器高度塌陷的問題
有兩種方法來清除浮動：

1. 對父容器添加以下這些屬性來形成BFC達到“清浮動”效果
   float為 left|right
   overflow為 hidden|auto|scroll
   display為 table-cell|table-caption|inline-block
   position為 absolute|fixed

2. 使用clear屬性
   clear屬性指不允許該元素周圍出現(xiàn)浮動元素，該元素通常用于對自己生效，例如clear:left就是指不允許自己左邊有浮動元素存在

常用的清除浮動的方法：

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


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

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

inherit 規(guī)定應該從父元素繼承 position 屬性的值。

static 默認值,沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

relative 生成相對定位的元素，相對于元素本身正常位置進行定位。不會改變其他元素的位置。設置后會脫離普通文檔流，會提升自己的層級參考點是該元素原來的位置。應用場景例如對圖片位置做細微調(diào)整。跟realtive相似的屬性有margin屬性，但是margin屬性位置的變動會改變后面元素位置的變動。

absolute 生成絕對定位的元素，相對于static定位以外的第一個祖先元素進行定位,元素的位置通過 left, top, right 以及 bottom 屬性進行規(guī)定，設置后會脫離普通文檔流。absolute類似float，會提升自己的層級，很有可能覆蓋其他元素，若祖輩元素都沒有設置除static以外的值，則以html的border為基準定位，若設置了，則以父元素的padding為基準。絕對定位使用場景例如：設置上級元素為position:relative，然后可以利用絕對定位使該元素相對于上級元素移動到任意位置。

z-index 有什么作用? 如何使用?
z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。

z-index

注釋：元素可擁有負的 z-index 屬性值。
注釋：Z-index 僅能在定位元素上奏效（例如 relative,absolute,fixed）
該屬性設置一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù)，則離用戶更近，為負數(shù)則表示離用戶更遠。

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

區(qū)別：position:relative;只相對自己原本位置發(fā)生偏移，不影響其它普通流中元素的位置。margin：除了讓元素自身發(fā)生偏移還影響其它普通流中的元素。除此之外，margin負值分為兩種，top/left是將當前元素拉出，改變的是當前元素自身，而right/bottom是將當前元素的后續(xù)元素拉進，然后覆蓋當前元素，它改變的是當前元素的后續(xù)元素

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

BFC是什么？BFC英文全稱是block formatting context,中文翻譯為塊級格式上下文，在css的W3C官方文檔中是這樣介紹的：
**
浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內(nèi)容創(chuàng)建新的BFC（塊級格式上下文）。
在BFC中，盒子從頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中，兩個相鄰的塊級盒子的垂直外邊距會產(chǎn)生折疊。
在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對于從右到左的格式來說，則觸碰到右邊緣）。
**
可以先這樣簡單理解，即BFC是一種獨立的布局模式，當元素滿足上述特征時，即會為元素及其內(nèi)容創(chuàng)建一個獨立BFC布局模式，這種布局模式只對創(chuàng)建元素及其內(nèi)容有作用，對外界其他元素則沒有影響。

那么如何生成bfc呢？
簡單點說，當對元素設置以下屬性就可以生成BFC：
float: left | right;（浮動元素）
overflow: hidden | auto | scroll;（overflow值不為visable）
display: table-cell | table-caption | inline-block;（非塊級元素）
position: absolute | fixed;（絕對定位元素）

bfc的特性：

1. 只有同屬于一個bfc，兩個元素才會發(fā)生margin重疊
   這個屬性解決了嵌套元素邊距嵌套的問題，給父元素設置為bfc則可解決此問題
2. bfc不會重疊浮動元素
   此屬性作用：若希望普通流元素意識到float元素，不去覆蓋它，給普通流元素加一個bfc，然后就有兩個bfc就不會發(fā)生重疊了
3. bfc可以包裹浮動
   此屬性可以用于清除浮動，將父元素設置為bfc即可解決父元素高度塌陷問題。

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

合并規(guī)則：外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。當同為正或同為負時，合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中絕對值的較大者；當一正一負時，合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的和。
按照BFC的定義，只有同屬于一個BFC時，兩個元素才有可能發(fā)生垂直Margin的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有阻擋(例如邊框，非空內(nèi)容，padding等)就會發(fā)生margin重疊。

相鄰元素

inline-block解決相鄰元素的外邊距重疊

嵌套元素的外邊距重疊

解決辦法：給父元素設置border、padding、overflow皆可以

padding

border

overflow

代碼

1. 實現(xiàn)如下alert效果，1
2. 實現(xiàn)如下表單效果，2
3. 實現(xiàn)如下模態(tài)框效果,3
4. 實現(xiàn)如下導航欄效果,4