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

特征：

• 浮動(dòng)元素會(huì)脫離正常的文檔流，按照其外邊距指定的位置相對(duì)于它的上一個(gè)塊級(jí)元素（或父元素）顯示；
• 浮動(dòng)元素后面的塊級(jí)元素的內(nèi)容會(huì)向此浮動(dòng)元素的外邊距靠齊，但是邊框和背景卻忽略浮動(dòng)元素而向上一個(gè)任意非浮動(dòng)元素靠齊；
• 浮動(dòng)元素后面的內(nèi)聯(lián)元素會(huì)向此浮動(dòng)元素的外邊距靠齊。
  影響：
• float造成的影響：
  1. 對(duì)其父元素的影響
     對(duì)于其父元素來(lái)說(shuō)，元素浮動(dòng)之后，它脫離當(dāng)前正常的文檔流，所以它也無(wú)法撐開(kāi)其父元素，造成父元素的塌陷。
  2. 對(duì)其兄弟元素（非浮動(dòng)）的影響
     如果兄弟元素為塊級(jí)元素，該元素會(huì)忽視浮動(dòng)元素的而占據(jù)它的位置，并且元素會(huì)處在浮動(dòng)元素的下層（并且無(wú)法通過(guò)z-index屬性改變他們的層疊位置），但它的內(nèi)部文字和其他行內(nèi)元素都會(huì)環(huán)繞浮動(dòng)元素。
     如果如果兄弟元素為內(nèi)聯(lián)元素，則元素會(huì)環(huán)繞浮動(dòng)元素排列。
  3. 對(duì)其兄弟元素（浮動(dòng)）的影響
     同方向的浮動(dòng)元素：當(dāng)一個(gè)浮動(dòng)元素在浮動(dòng)過(guò)程中碰到同一個(gè)方向的浮動(dòng)元素時(shí)，它會(huì)緊跟在它們后面;
     反方向的浮動(dòng)元素：互不影響，位于同一條水平線上，當(dāng)空間不夠時(shí)會(huì)被擠下。
  4. 對(duì)子元素的影響
     當(dāng)一個(gè)元素浮動(dòng)時(shí)，在沒(méi)有清除浮動(dòng)的情況下，它無(wú)法撐開(kāi)其父元素，但它可以讓自己的浮動(dòng)子元素?fù)伍_(kāi)它自身，并且在沒(méi)有定義具體寬度情況下，使自身的寬度從100%變?yōu)樽赃m應(yīng)（浮動(dòng)元素display:block）。其高度和寬度均為浮動(dòng)元素高度和非浮動(dòng)元素高度之間的最大值。

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

• 清除浮動(dòng)
  清除掉元素float屬性。
• 如何清除浮動(dòng)?
  clear屬性不允許被清除浮動(dòng)的元素的左邊/右邊挨著浮動(dòng)元素，底層原理是在被清除浮動(dòng)的元素上邊或者下邊添加足夠的清除空間。不要在浮動(dòng)元素上清除浮動(dòng)。
• 清除浮動(dòng)方法
  1. 利用 clear屬性，清除浮動(dòng)
  2. 使父容器形成BFC

• **方法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)景是什么？

• CSS有三種基本的定位機(jī)制：普通流，浮動(dòng)，絕對(duì)定位(absolute,fixed)
• 普通流是默認(rèn)定位方式，在普通流中元素框的位置由元素在html中的位置決定，這也是我們最常見(jiàn)的方式，其中position: static與position:relative屬于普通流的定位方式;
• 浮動(dòng)定位定位機(jī)制;
• 絕對(duì)定位包括 absolute和 fixed
  通過(guò)使用position屬性，選擇不同的定位方式：

• absolute, relative, fixed偏移的參考點(diǎn)分別是什么？
  absolute, relative, fixed偏移的參考點(diǎn)實(shí)際就是他們的定義上下文。

1. absolute的定位
   瀏覽器會(huì)遞歸查找該元素的所有父元素，如果找到一個(gè)設(shè)置了position:relative/absolute/fixed的元素，就以該元素為基準(zhǔn)定位，如果沒(méi)找到，就以瀏覽器邊界定位。
2. relative的定位
   relative元素的定位永遠(yuǎn)是相對(duì)于元素自身位置的，和其他元素沒(méi)關(guān)系，也不會(huì)影響其他元素。
3. fixed的定位
   fixed元素的定位永遠(yuǎn)是相對(duì)于瀏覽器邊界的，和其他元素沒(méi)有關(guān)系。

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

z-index屬性設(shè)置一個(gè)定位元素沿Z軸的位置，Z軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù)，則離用戶更近，為負(fù)數(shù)則表示離用戶更遠(yuǎn)。
當(dāng)網(wǎng)頁(yè)上出現(xiàn)多個(gè)由絕對(duì)定位（POSITION:absolute）或固定定位（POSITION:fixed）所產(chǎn)生的浮動(dòng)層時(shí)，必然就會(huì)產(chǎn)生一個(gè)問(wèn)題，就是當(dāng)這些層的位置產(chǎn)生重合時(shí)，誰(shuí)在誰(shuí)的上面呢？或者說(shuō)誰(shuí)看得見(jiàn)、誰(shuí)看不見(jiàn)呢？這時(shí)候就可以通過(guò)設(shè)置[z-index]的值來(lái)解決，這個(gè)值較大的就在上面，較小的在下面。
使用：

z-index值為-1.jpg

文字在div區(qū)域的上方。

z-index的值為1.jpg

div區(qū)域在文字的上方。

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

• position：relative可以使元素發(fā)生偏移，但是在文檔流中，它仍然占據(jù)著原來(lái)的位置，所以其他元素的位置不會(huì)發(fā)生變化。
  
  relative.jpg
• 負(fù)margin：通過(guò)負(fù)margin進(jìn)行偏移的元素，它會(huì)放棄偏移前占據(jù)的空間，這樣它后面文檔流中的其它元素就會(huì)“流”過(guò)來(lái)填充這部分空間，所以其他元素的位置發(fā)生了變化。

-margin.jpg

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

BFC全稱為塊級(jí)格式化上下文（Block Format Content）.存在IE低版本不兼容的問(wèn)題。
生成條件：

• float: left/right
• overflow: hidden/auto/scroll
• display: table-cell/inline-block/table-caption
• position: absolute/fixed
  作用:
• BFC會(huì)阻止垂直外邊距的折疊
  只有同屬一個(gè)BFC時(shí)，兩個(gè)元素才有可能發(fā)生垂直Margin的重疊
• BFC不會(huì)重疊浮動(dòng)元素
• BFC可以包含浮動(dòng)（利用此條特性來(lái)“清除浮動(dòng)”，也就是說(shuō)對(duì)父容器添加這些屬性形成
  BFC）

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

外邊距合并

• 兩個(gè)元素上下排列，上面的元素有margin-bottom，下面的元素有margin-top
• 父元素有margin-top/bottom同時(shí)子元素也有
• 空元素同時(shí)有margin-top/bottom其上下margin會(huì)合并
  合并
• 相鄰元素間上下外邊距取margin值大的那個(gè)
• 父子元素外邊距合并會(huì)讓父元素對(duì)外展現(xiàn)出來(lái)的外邊距將直接變成這個(gè)父元素和其第一個(gè)子元素的margin-top的較大者。
• 當(dāng)元素為空元素時(shí)，元素的上下margin會(huì)合并，并且多個(gè)兄弟（父子）空元素的外邊距會(huì)合并成一個(gè)，最終展現(xiàn)出來(lái)的外邊距會(huì)是多個(gè)外邊距中較大的那個(gè)，如果當(dāng)中有負(fù)margin的存在時(shí)，合并后的外邊距將是最大正邊距加上最小負(fù)邊距
  如何不讓相鄰元素外邊距合并
• 設(shè)置浮動(dòng)；
• 設(shè)置為display：inline-block；
• 使其父元素各形成BFC；
  父子外邊距合并的范例
  
  父子元素邊距合并.jpg
  
  
  取消父子元素邊距合并.jpg