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

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

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

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

3.有幾種定位方式辰斋，分別是如何實現定位的策州，參考點是什么瘸味，使用場景是什么宫仗？

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

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

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

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

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

6.BFC 是什么窟扑？如何生成 BFC喇颁？BFC 有什么作用殖属？舉例說明

• BFC的全稱是 Block Format Content，中文翻譯為塊級格式化上下文洗显。從樣式上看外潜，具有 BFC 的元素與普通的容器沒有什么區(qū)別，但是從功能上挠唆，具有 BFC 的元素可以看作是隔離了的獨立容器处窥，容器里面的元素不會在布局上影響到外面的元素，并且 BFC 具有普通容器沒有的一些特性玄组，例如可以包含浮動元素滔驾。
• 滿足下面任一條件的元素，會觸發(fā)為 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)灵临，有的地方翻譯為外邊距合并截型。
• 發(fā)生外邊距塌陷的三種基本情況:
  1.相鄰的兩個兄弟元素之間的外邊距會塌陷（除非后者兄弟姐妹需要[清除過去的浮動]）。
  2.塊級父元素與其第一個/最后一個子元素儒溉，如果中間不存在邊框宦焦、內邊距、內聯元素顿涣、清除浮動這四條屬性波闹，那么，塊級父元素和其第一個/最后一個子元素就會發(fā)生外邊距合并的現象涛碑。
  3.如果存在一個空的塊級元素精堕，其 border、padding蒲障、inline content歹篓、height、min-height都不存在揉阎。那么此時它的上下邊距中間將沒有任何阻隔庄撮，此時它的上下外邊距將會合并。
• 外邊距合并的規(guī)則：如果合并的外邊距都是正值或者負值毙籽，那么邊距會取其中絕對值最大的一個作為合并的邊距洞斯，如果合并的外邊距為一正一負，那么合并的邊距為兩個正負邊距的值相加惧财。
• 形成BFC的話會阻止外邊距合并巡扇。

• 父子外邊距合并范例:

  
  
  image.png
  
  

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

image.png

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