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

• 浮動元素的特征：CSS設(shè)計float屬性主要目的和初衷，是為了實現(xiàn)文本繞排圖片的效果。但是，這個屬性也成了創(chuàng)建多欄布局最簡單的方式。 浮動的元素已經(jīng)脫離了文檔流（normal flow正常流），因而無論原先在標(biāo)記中包含它還是跟隨它的元素，其布局都會受到它的影響。 說得形象點，在你浮動一張圖片或者其他元素時，你是在要求游覽器把它往上方推，直到它碰到父元素的內(nèi)邊界。后面的元素不再認(rèn)為浮動元素在正常文檔流中位于它的前面了，有一個例外，就是還處于文檔流中元素的文本內(nèi)容會圍繞浮動元素繞排。

1. 對父容器的影響。
   

   浮動元素脫離了文檔流， 其父元素也看不到它了，因而也不會包圍它，也就是通常所說的父容器塌陷，會對布局造成破壞性影響。
   浮動造成父容器塌陷.png

2. 對其他浮動元素的影響。
   如果幾個相鄰的元素都具有設(shè)定的寬度，都是浮動的，而且水平空間也足以容納它們，它們就會并列排在一行，創(chuàng)建分欄布局的原理。
   同一個父容器下高度不統(tǒng)一的浮動元素會按上下順序排列，緊隨其后的浮動元素還會根據(jù)屬性值水平排列。

   
   
   高度不統(tǒng)一的浮動元素會按上下順序排列，緊隨其后的浮動元素還會根據(jù)屬性值排列.png

3. 對普通元素和文字的影響。
   由于浮動元素脫離了文檔流，這句話很重要。處于同一個父容器下常規(guī)文檔流中的元素，會看不到浮動元素。但是處于常規(guī)文檔流中的元素如果有文本內(nèi)容，就會圍繞浮動元素繞排。

   
   
   浮動元素對于在常規(guī)文檔流中的元素的影響1.png

浮動元素對于在常規(guī)文檔流中的元素的影響.png

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

• 清除浮動的目的就是解決浮動元素對布局造成的一些不利結(jié)果。例如: 浮動元素造成的父容器塌陷問題；
  不想讓常規(guī)文檔流中的元素圍繞浮動元素繞排。

• 如何清除浮動?

1. 為父容器添加overflow: hidden。

這種方法很簡單，但是不直觀。實際上，overflow: hidden聲明的真正用途是防止包含元素被超大內(nèi)容撐大。應(yīng)用overflow: hidden之后，包含元素依然保持其設(shè)定的寬度，而超大的子內(nèi)容則會被容器剪切掉。除此之外，overflow: hidden還有另外一個作用，即它能可靠地迫使父容器（父元素）包含其浮動的子元素。

為父容器添加overflow_hidden強制父容器包圍浮動元素.png

overflow_hidden真正作用.png

2. 同時浮動父容器（父元素），可靠地迫使父容器（父元素）包含其浮動的子元素。
   當(dāng)然，在同一個父容器下，同時使子元素都浮動，可以消除文本繞排的排版效果。

   
   
   使父容器也浮動.png

3. 添加非浮動的清除元素。
   第三種方法，強制父元素包含其浮動元素的方法，就是給父元素的最后添加一個非浮動的子元素，然后給該非浮動子元素添加clear屬性和聲明。由于父元素一定會包圍非浮動的子元素，而這個非浮動的子元素又處于父容器的最下方，因此，父容器一定會包含這個子元素以及前面的浮動元素。

3.1. 在同一個父容器下的最后面添加一個空的子元素div標(biāo)簽，標(biāo)簽屬性clear: both或者其他屬性值， 來清除浮動元素造成的父容器塌陷。但是不建議使用這種方法，因為會添加一個無意義的標(biāo)簽。

同一個父容器下最后面添加一個clear屬性的標(biāo)簽.png

3.2. 通過CSS樣式，給父容器添加clearfix類。

通過給父容器添加clearfix類.png

4. 在沒有父元素時如何清除。
   最簡單的辦法就是給一個浮動元素應(yīng)用clear：both或者根據(jù)情況添加其他屬性值，強迫它定位在前一個浮動元素的下方。

   
   
   添加clear屬性.png

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

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

2. static, 默認(rèn)值，在這種情況下，每個元素都處于常規(guī)文檔流中（normal flow），要想突破static定位提供的這種順序布局元素的方式，必須把盒子的position屬性改為其他三個值。

3. position: relative，把position屬性設(shè)置為relative，生成相對定位。到底是相對于哪里定位呢？相對的是它原來在常規(guī)文檔流中的位置（或者說是默認(rèn)位置）。接下來，可以使用top、right、bottom、left屬性來改變它的位置。要注意，除了設(shè)置了這個position:relative的元素自己相對于原始位置挪動一下之外，沒有發(fā)生任何變化。換句說，這個元素始終占據(jù)的空間沒有動，其他元素也沒動。 使用相對定位的關(guān)鍵是什么呢？就是要考慮到元素原來的空間。

   
   
   使用相對定位要考慮元素原來的空間.png

4. position: absolute, 絕對定位。絕對定位會把元素徹底從常規(guī)文檔流中拿出來。絕對定位下，元素會從文檔流中被“連根拔起”，然后相對于其他元素定位。既然絕對定位是相對其他元素定位，那么就引出了關(guān)于定位一個重要的概念：定位上下文。絕對定位跟相對定位的不同之處在于，絕對定位不是根據(jù)它在常規(guī)文檔流中的位置移動，而是相對于祖先元素在定位。實際上，絕對定位的任何祖先元素都可以成為它的定位上下文，只要你把相應(yīng)祖先元素的position設(shè)定為relative即可。絕對定位的元素可以通過top、right、bottom、left屬性來進(jìn)行位置的設(shè)定。

5. position: fixed， 固定定位。從完全移出文檔流的角度說，固定定位與絕對定位類似。不同之處在于，固定定位元素上下文是視口（游覽器窗口或者手持設(shè)備的屏幕），因而它不會隨頁面滾動而移動。最常見的情況是用它創(chuàng)建不隨頁面滾動的導(dǎo)航條或者用戶登錄信息欄，或者彈出視頻窗口。

   
   
   絕對定位.png

6. position: sticky。 CSS3新屬性，表現(xiàn)類似position:relative和position:fixed的合體。當(dāng)目標(biāo)區(qū)域在屏幕中可見時，它的行為就像position:relative；而當(dāng)頁面滾動超出目標(biāo)區(qū)域的時，它的表現(xiàn)就像position: fixed，它會固定在目標(biāo)位置。

   
   
   position sticky1.png

position sticky 2.png

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

z-index 屬性設(shè)置元素的堆疊順序。在同一堆疊上下文中，擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
默認(rèn)情況下，是按照堆疊順序來顯示元素。

默認(rèn)按順序堆疊.png

在同一堆疊上下文中，擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。.png

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

二者的區(qū)別

• position:relative相對定位后元素位置發(fā)生偏移，只是視覺上顯示的位置變化，但是它仍會占據(jù)原來在常規(guī)文檔流中
  的空間，不會影響其他文檔流元素。

• 負(fù)margin會使元素在文檔流中位置發(fā)生偏移，會影響周邊的元素位置變化。

相對定位使用margin偏移仍占據(jù)自身位置.png

使用了負(fù)margin整體偏移.png

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

• BFC是Block Formatting Context， 翻譯過來即塊級格式化上下文。

• 關(guān)于如何生成BFC

1. float為 left，right。
2. overflow為 hidden，auto，scroll。
3. display為 table-cell，table-caption，inline-block。
4. position為 absolute，fixed。

• BFC有什么作用？舉例說明， 請看圖示。

• BFC會阻止垂直外邊距（margin-top、margin-bottom）折疊。
  按照BFC的定義，只有同屬于一個BFC時，兩個元素才有可能發(fā)生垂直Margin的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有阻擋(例如邊框，非空內(nèi)容，padding等)就會發(fā)生margin重疊。
  因此要解決margin重疊問題，只要讓它們不在同一個BFC就行了，但是對于兩個相鄰元素來說，意義不大，沒有必要給它們加個外殼，但是對于嵌套元素來說就很有必要了，只要把父元素設(shè)為BFC就可以了。這樣子元素的margin就不會和父元素的margin發(fā)生重疊。

  
  
  生成BFC阻止上下margin的合并.png

• BFC不會重疊浮動元素。

  
  
  BFC不會重疊浮動元素.png

• BFC可以包含浮動。

  
  
  BFC可以包含浮動.png

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

7.1 在什么場景下會出現(xiàn)外邊距合并？

當(dāng)塊處于同一個文檔流或者同一個BFC中，兩個元素才有可能發(fā)生垂直Margin的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有阻擋(例如邊框，非空內(nèi)容，padding等)就會發(fā)生margin重疊。對于父子元素，容器沒有padding和border內(nèi)部的margin會導(dǎo)致外邊距合并。

7.2 如何合并？

合并規(guī)則

1. 兩個margin都是正值的時候，取兩者的最大值。
   請看圖示， box1 和 box2 處于同一個BFC當(dāng)中，統(tǒng)一設(shè)置了margin：40px；但是box1和box2之間的外邊距不是80px而是40px, 就發(fā)生外邊距合并。

同處于一個BFC外邊距合并.png

請看圖示， box1 和 box2 處于同一個BFC當(dāng)中，box1的margin-bottom：40px， box2的margin-top: 50px, 但是box1和box2之間的外邊距不是90px而是50px, 發(fā)生外邊距合并。

上下margin都為正值的情況margin取最大值.png

2. 當(dāng) margin 都是負(fù)值的時候，取的是其中絕對值較大的，然后，從0位置，負(fù)向位移。

   
   
   margin都為負(fù)值取margin絕對值大的合并.png

3. 當(dāng)有正有負(fù)的時候，先取出負(fù) margin 中絕對值中最大的，然后和正 margin 值中最大的 margin 相加。

   
   
   margin都為負(fù)值取margin絕對值大的合并.png

7.3 如何不讓相鄰元素外邊距合并？

• 被非空內(nèi)容、padding、border 或 clear 分隔開。

  
  
  防止父子間的margin合并加了border.png

不加border或padding margin合并.png

• 不在一個普通流中或一個BFC中。

  
  
  同一父容器下把子元素生成BFC阻止外邊距合并.png

• 浮動元素、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其他元素的 margin 折疊（注意這里指的是上下相鄰的元素）。

  
  
  浮動元素不會疊加上下margin.png

7.4 給個父子外邊距合并的范例。

處于常規(guī)文檔流中，給父容器box1設(shè)置了margin ：20px，里面的子元素標(biāo)簽p也處于常規(guī)文檔流中，默認(rèn)的margin值（16px）被合并，所以變成了20px，發(fā)生了父子外邊距合并。

父子間的上下margin合并.png

如果把父容器轉(zhuǎn)化為一個新的BFC即可解決父子邊距合并，還有一些其他方法，在此不一一列舉了。

形成新的BFC阻止父子邊距合并.png

代碼

1. 實現(xiàn)如下alert效果

2. 實現(xiàn)如下表單效果

3. 實現(xiàn)如下模態(tài)框效果

4. 實現(xiàn)如下導(dǎo)航欄效果