浮動(dòng)元素有什么特征？對(duì)父容器、其他浮動(dòng)元素、普通元素、文字分別有什么影響?

特征：

1. 浮動(dòng)元素的框可以向左或者向右移動(dòng)，直到它的外邊緣碰到父元素包含框或者另一個(gè)浮動(dòng)元素的邊框?yàn)橹梗?/li>
2. 浮動(dòng)元素不在文檔普通流之中，因此文檔普通流中的塊級(jí)元素感知不到浮動(dòng)元素的存在；
3. 在css中任何元素都可以浮動(dòng)，浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論該元素本身是什么元素

對(duì)父容器的影響：
浮動(dòng)元素脫離文檔流向左或者向右移動(dòng)，直到邊框碰到父元素的邊緣,若父元素沒(méi)有設(shè)置高度，則父元素高度塌陷，高度為0；

這個(gè)是父元素沒(méi)有設(shè)置高度

這個(gè)父元素設(shè)置了高度

demo

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

普通元素被掩蓋

清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法

清除浮動(dòng)：清除浮動(dòng)指的是解決浮動(dòng)元素父容器高度塌陷的問(wèn)題
有兩種方法來(lái)清除浮動(dòng)：

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

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

常用的清除浮動(dòng)的方法：

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


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

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

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

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

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

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

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

z-index

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

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

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

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

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

那么如何生成bfc呢？
簡(jiǎn)單點(diǎn)說(shuō)，當(dāng)對(duì)元素設(shè)置以下屬性就可以生成BFC：
float: left | right;（浮動(dòng)元素）
overflow: hidden | auto | scroll;（overflow值不為visable）
display: table-cell | table-caption | inline-block;（非塊級(jí)元素）
position: absolute | fixed;（絕對(duì)定位元素）

bfc的特性：

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

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

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

相鄰元素

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

嵌套元素的外邊距重疊

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

padding

border

overflow

代碼

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