浮動定位（BFC、邊距合併）

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

• 浮動元素不在文件的普通流中，它可以根據float屬性值而左右移動，直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣才停止移動。

• 對父容器的影響：如果父容器的子元素都是浮動元素，那麼父容器會失去高度，在浮動元素之外。視覺上，父容器沒有包含住浮動的子元素。

• 其它浮動元素的影響：如果包含塊太窄無法容納水平排列的全部浮動元素，那麼其它浮動元素會向下移動，直到有足夠的空間，而如果浮動元素的高度不同，那麼向下移動的時候可能會被卡住。

• 普通元素的影響：普通元素會視浮動元素不見，佔據浮動元素原有的位置，但會被浮動元素遮罩。
  對文字的影響：文字會感知到浮動元素的存在，會留出空間，形成環繞效果。

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

• 清除浮動是指如何讓一個沒有高度的div中兩個元素浮動後，div的高度為0的父盒子重新包含子元素

• 清除浮動：

• 新增額外標籤設定clearfix類為clear:both;
  　　原理是這個空的div能讓父級獲取到高度，是因為設定之後這個div的左右都不能有浮動元素，所以這個空的div元素會向下移動，直到換行，而為了讓這個div能夠換行，父元素至少要包含浮動元素的高度才能提高足夠的空間，這樣實現清除浮動的影響

PS:clear:left|right是指清除左邊左浮動的元素（或者右邊右浮動的元素）

• 設定父元素為浮動元素

*設定position:absolute

• overflow:hidden

• 父級div定義偽類:after和zoom;
  .clearfix:after {
  content:'';
  display:block;
  clear:both;
  }
  .clearfix {
  *zoom:1;
  }

3.有幾種定位方式，分別是如何實現定位的，參考點是什麼，使用場景是什麼？

• 有6種定位方式：

• inherit：從父元素繼承；

• static：預設值，沒有定位，元素出現在正常的文件流中。參考點是文件流中的位置。

• relative：相對定位。相對於元素本身正常位置進行定位，透過top、bottom、left、right屬性來設定偏移量。使用場景：為絕對定位設定參照物或對元素自身位置進行區域性調整。

• absolute：絕對定位。相對於static定位意外的第一個祖先元素進行定位，若都沒有發現則以html標籤為參考進行定位。使用場景：當想讓元素參照特定參照物進行定位時使用。

• fixed：固定定位。生成絕對定位元素，相對於viewport進行定位。

• sticky：物件在常態時遵循普通流。它就像是relative和fixed的合體，當在螢幕中時按常規流排版，當捲動到螢幕外時則表現如fixed。

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

• 因為絕對定位的元素脫離了普通流，所以絕對定位的元素可以覆蓋頁面上的其它元素。這時可以透過給元素設定z-index屬性來控制疊放順序，該屬性值越高，元素位置越靠上。

5.position:relative和負margin都可以使元素位置發生偏移?二者有什麼區別

• position:relative;還佔據原來的位置，只是相對自己原本位置發生偏移，不影響其它普通流中元素的位置。

• margin：除了讓元素自身發生偏移還影響其它普通流中的元素位置。

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

• BFC是塊級格式上下文。其定義是：浮動、絕對定位（絕對定位、固定定位）元素、塊級容器（如inline-block、 table-cell、table-caption）並不是塊級盒子，還包括哪些overflow屬性值取值visible以外的塊級盒子，會為它們的內容物建立一個新的塊級格式化上下文。對元素設定以下屬性就可以生成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的重疊，這個包括相鄰元素，巢狀元素，只要他們之間沒有阻擋(例如邊框，非空內容，padding等)就會發生margin重疊。

• 因此要解決margin重疊問題，只要讓它們不在同一個BFC就行了，但是對於兩個相鄰元素來說，意義不大，沒有必要給它們加個外殼，但是對於巢狀元素來說就很有必要了，只要把父元素設為BFC就可以了。這樣子元素的margin就不會和父元素的margin發生重疊

• BFC不會重疊浮動元素

• BFC可以包含浮動

• BFC的作用有：
  （1） 解決margin重疊問題。所謂margin重疊是指處於同一個BFC的相鄰元素、巢狀元素，只要它們之間沒有阻擋（如：邊框、非空內容、padding等）就會發生margin重疊。這是隻要讓其中一個元素生成新的BFC就能解決margin重疊問題。
  （2） 清除浮動。因為BFC可以包含浮動，所以讓父容器生成新的BFC可以讓父容器在視覺上包圍了浮動的子元素，因而清除了浮動
  
  

7.在什麼場景下會出現外邊距合併？如何合併？如何不讓相鄰元素外邊距合併？給個父子外邊距合併的範例

• 相鄰的兩個盒子和巢狀的盒子會出現外邊距合併

• 合併規則

• 外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

• 相鄰的兩個盒子上下邊距合併，如圖

相鄰.png

• 解決辦法：

  
  

  

  相鄰2.png

相鄰3.png

• 巢狀元素margin合併，如圖：

  
  

  

  巢狀.png

• 解決辦法：

  
  

  

  巢狀1.png

  
  

  

  巢狀2.png

  
  

  

  巢狀3.png

  
  

  

  巢狀4.png

8.程式碼題

• 關鍵點在於利用浮動的特性，把x放在第一位就可以把第二位塊元素覆蓋，而不用定位去做

• 關鍵點在pidding，運用padding將input撐大，加上overflow:auto就可以做出下方有滑動欄的效果

• 關鍵點兩點

  • 利用固定定位將背景撐開固定在瀏覽器展示位置

    .modal {  position:fixed;  top: 0;  right: 0;  bottom: 0;  left: 0;  background-color: rgba(0,0,0,0.3);
    }

  • 在不知道盒子寬高的情況下，可以使用transform:translate(-50%,-50%); 當margin-top,margin-lfet的居中法使用
    .modal .panel {
    position:absolute;
    top:50%;
    left:50%;
    width: 600px;
    transform:translate(-50%,-50%);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2),0 4px 20px rgba(0,0,0,0.19);
    }

作者：飢人谷_米彌輪
連結：