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

• 浮動元素的特征：CSS的浮動更準確的說是水平浮動.浮動元素可以左浮動或者右浮動，設置浮動之后元素會脫離普通文檔流，直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣。任何元素都可以浮動，浮動元素會生成一個塊級框，而不論它本身是何種元素。
• 對父容器：浮動元素會脫離正常文檔流，所以他不能撐開父元素，容易造成父元素的塌陷。
• 對其他浮動元素：如果是相同方向浮動的元素，會按順序向浮動方向排列，如果不同方向，則會往兩邊排列，如果父元素的空間不足以一排容納，則會順延到下一排，如果浮動元素的高度不同,那么向下移動的時候可能被卡住。
• 對普通元素：因為脫離了普通文檔流，普通元素會感覺不到浮動元素的存在。
• 對文字：文本內容會受到浮動元素的影響,會移動以留出空間.用術語說就是浮動元素旁邊的行框被縮短,從而給浮動元素流出空間,因而行框圍繞浮動框。

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

• 清除浮動指的是解決因為浮動的原因導致的父容器塌陷的問題。
• 方法一：在浮動元素之后添加一個DIV，然后對其設置clear:both；屬性，來完成清除浮動，缺點是增加了一個無意義的標簽。
• 方法二：使父元素形成BFC。（例如：對父元素添加overflow:hidden屬性。）
• 方法三：在最后一個元素后添加一個after偽類，然后再偽類中設置clear:both屬性，效果和方法一一樣，但是不會增加一個無意義的標簽，相對來說用的最多的一種方法。

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

• 相對定位:對元素設置position:relative;便是對元素設置相對定位，表示相對于元素本身正常位置進行定位，正常文檔流中的其他元素會感覺元素還在原來位置，不會進行變動。
• 絕對定位:對元素設置position:absolute;便是對元素設置絕對定位，他是相對于static定位以外的第一個祖先元素（offset parent）進行定位,元素的位置通過 left, top, right 以及 bottom 屬性進行規定。
• static正常定位:默認值，沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）
• 固定定位:position:fixed屬性是固定定位，也是相對于瀏覽器窗口進行絕對定位。元素的位置和絕對定位一樣通過 left, top, right 以及 bottom 屬性進行規定。

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

• z-index 屬性指定了一個元素及其子元素的 z-order。 當元素之間重疊的時候，z-order 決定哪一個元素覆蓋在其余元素的上方顯示。
• z-index的值只在同級元素之間才會影響，對于同級元素，position不為static且z-index存在的情況下z-index大的元素會覆蓋z-index小的元素，即z-index越大優先級越高。對于不是同級元素，z-index不影響堆疊順序。
• 如何使用：只要是position的值不為static的話即可設置z-index.

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

• 二者區別為:position:relative不會改變普通文檔流之中其他元素的位置，其他元素還是會認為設置了position:relative的元素在原來的位置，但是設置marin來讓元素移動，會占用移動后的和移動前的空間，也會影響后面的元素的位置。

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

• BFC的全稱是 Block Format Content，中文翻譯為塊級格式化上下文。從樣式上看，具有 BFC 的元素與普通的容器沒有什么區別，但是從功能上，具有 BFC 的元素可以看作是隔離了的獨立容器，容器里面的元素不會在布局上影響到外面的元素，并且 BFC 具有普通容器沒有的一些特性，例如可以包含浮動元素。
• 滿足下面任一條件的元素，會觸發為 BFC ：
  1.浮動元素，float 除 none 以外的值
  2.絕對定位元素，position（absolute，fixed）
  3.display 為以下其中之一的值 inline-blocks，table-cells，table-captions
  4.overflow 除了 visible 以外的值（hidden，auto，scroll）
• BFC的比較常用的一個作用是清除浮動：

image.png

子元素因為設置了浮動，所以父元素塌陷了。

image.png

對父元素設置overflow:hidden;形成BFC，清除浮動。

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

• 塊元素的頂部外邊距和底部外邊距有時被組合(折疊)為單個外邊距，其大小是組合到其中的最大外邊距，這種行為稱為外邊距塌陷(margin collapsing)，有的地方翻譯為外邊距合并。
• 發生外邊距塌陷的三種基本情況:
  1.相鄰的兩個兄弟元素之間的外邊距會塌陷（除非后者兄弟姐妹需要[清除過去的浮動]）。
  2.塊級父元素與其第一個/最后一個子元素，如果中間不存在邊框、內邊距、內聯元素、清除浮動這四條屬性，那么，塊級父元素和其第一個/最后一個子元素就會發生外邊距合并的現象。
  3.如果存在一個空的塊級元素，其 border、padding、inline content、height、min-height都不存在。那么此時它的上下邊距中間將沒有任何阻隔，此時它的上下外邊距將會合并。
• 外邊距合并的規則：如果合并的外邊距都是正值或者負值，那么邊距會取其中絕對值最大的一個作為合并的邊距，如果合并的外邊距為一正一負，那么合并的邊距為兩個正負邊距的值相加。
• 形成BFC的話會阻止外邊距合并。

• 父子外邊距合并范例:

  
  
  image.png
  
  

  可以看出此時因為父子元素之間并沒有邊框、內邊距、內聯元素、清除浮動這四條屬性，上邊距已經合并了。

image.png

設置浮動屬性之后，外邊距合并消失。當然如果設置邊框、內邊距、內聯元素其他任何一種，外邊距合并也會消失。綜合考慮是：設置對網頁影響最小的一個因素。