浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?
浮動的元素會脫離文檔流，向左或者向右移動至包含塊內(nèi)邊緣或者同樣浮動的元素外邊緣。文檔流中的普通元素察覺不到浮動元素，但是其文本內(nèi)容卻能察覺到浮動元素，呈現(xiàn)出圍繞浮動元素排列的表現(xiàn)方式。

• 對父容器的影響：如果父容器中的元素都是浮動元素，那么父容器會失去它的高度
  

  

  title

• 對其他浮動元素的影響：如果父元素的寬度不夠，父容器里的其他浮動元素會向下移動，直到位置足夠放下。
  

  

  title
  
  如果浮動元素的高度不同，向下移動的元素就會被比它高的元素卡住
  
  

  title

• 對普通元素的影響：文檔流中的普通元素察覺不到浮動元素，但是其文本內(nèi)容卻能察覺到浮動元素，呈現(xiàn)出圍繞浮動元素排列的表現(xiàn)方式。
  紅框左移,綠框沒有察覺到浮動元素紅框的存著，位置沒有發(fā)生改變，綠框被覆蓋
  

  

  title
  
  文本內(nèi)容卻能察覺到浮動元素，呈現(xiàn)出圍繞浮動元素排列的表現(xiàn)方式
  
  

  title

• 什么是文檔流？

文檔流是指按照從左到右、從上到下的布局方式，又稱普通流、正常流、標準文檔流。
標準化的語言是：文檔流是瀏覽器按照 HTML 的內(nèi)容按順序解析并呈現(xiàn)，遇到行內(nèi)元素就往行內(nèi)放，遇到塊級元素就空一行放置，一次排列。

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

title

• 如何清除浮動呢

1. 在文檔中添加一個元素，給他設置一個樣式，clear:both;
   
   

   title
   
   這種方法會在文檔的最后產(chǎn)生一個無意義標簽，那么我們還可以用另一種方法寫，css中在父容器的最后添加一個:after
   
   

   title

2.將父容器變成BFC

什么是BFC

BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干。

BFC布局規(guī)則

• 內(nèi)部的Box會在垂直方向，一個接一個地放置
• Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
• BFC的區(qū)域不會與float box重疊。
• BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
• 計算BFC的高度時，浮動元素也參與計算。

哪些元素會生成BFC?

• 根元素
• float: left|right
• overflow: hidden|auto|scroll
• display: table-cell|table-caption|inline-block
• position: absolute|fixed
  參考文章

綜上所述，只要將父容器變成一個BFC，就可以達到清除浮動的效果了

title

有幾種定位方式，分別是如何實現(xiàn)定位的，參考點是什么，使用場景是什么？
CSS 定位 ：Positioning屬性把元素放置到一個靜態(tài)的、相對的、絕對的、或固定的位置中。屬性有以下幾種：

css的定位方式基本有三種：普通流，相對定位，絕對定位

1. 普通流，相對定位（不會脫離文檔流）

• 普通流是默認定位方式，在普通流中元素框的位置由元素在html中的位置決定，元素position屬性為static或繼承來的static時就會按照普通流定位，這也是我們最常見的方式

• 相對定位比較簡單，對應position屬性的relative值，如果對一個元素進行相對定位，它將出現(xiàn)在他所在的位置上，然后可以通過設置垂直或水平位置，讓這個元素相對于它自己移動，在使用相對定位時，無論元素是否移動，元素在文檔流中占據(jù)原來空間，只是表現(xiàn)出來的位置會改變
  普通文檔流的排列方式：

  
  
  

  title

相對定位：position:relative;

title

2.絕對定位，固定定位（會脫離文檔流）

絕對定位
絕對定位的元素的位置是相對于距離最近的非static祖先元素位置決定的。如果元素沒有已定位的祖先元素，那么他的位置就相對于初始包含塊html來定位。
因為絕對定位與文檔流無關(guān)，所以絕對定位的元素可以覆蓋頁面上的其他元素，可以通過z-index屬性控制疊放順序，z-index越高，元素位置越靠上。也可以理解為層級。

title

title

fixed固定定位是屬于絕對定位中的一種。一般使用場景，例如：導航欄，右側(cè)工具欄，底部回到頂部按鈕等。它的定位是相對于瀏覽器的視窗口（viewport）來定的，而其他的絕對定位則是相遇于文檔（html）定位的。

title

參考文章

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

• 元素可擁有負的 z-index 屬性值。
• Z-index 僅能在定位元素上奏效（例如 position:absolute;

position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative是在自身的文檔流中讓自己顯示上發(fā)生偏移，文檔流中其他元素不會因為它的偏移而產(chǎn)生位置上的變化；負margin是讓元素的外邊框產(chǎn)生空隙從而發(fā)生偏移，此偏移會影響到元素后面的元素的位置。

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

BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干。

以下元素都可以生成BFC

• 根元素
• float: left|right
• overflow: hidden|auto|scroll
• display: table-cell|table-caption|inline-block
• position: absolute|fixed

BFC的作用：

1. 清除內(nèi)部浮動

   
   
   

   title
   
   

   隨意使用一個元素生成BFC，就能夠清除浮動了

Paste_Image.png

2. 防止垂直 margin 重疊

   
   
   

   title
   
   

   可以讓兩個元素分別在不同的BFC下，那么兩個元素的邊距就不會被重疊了

Paste_Image.png

在什么場景下會出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
當兩個垂直外邊距（margin）相遇時，將形成一個外邊距合并，合并后的高度以這兩個外邊距中高度值較大值為準。

外邊距合并：

1. 相鄰的同胞元素
   
   

   title
   
   阻止外邊距合并

• 給元素加一個display:inline-block;(只針對當前加的元素起效)
• 給元素添加folat, position等

2. 父元素與子元素（在父元素沒有邊框，padding等的情況下，最上面的元素的上邊距和最下面的元素下邊距與父元素發(fā)生合并）

Paste_Image.png

阻止外邊距合并

• 父元素生成一個新的BFC, overflow, display等...
• 給父元素加上一個邊框或者padding等..