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

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

2.清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法

• 清除浮動(dòng)指的是解決因?yàn)楦?dòng)的原因?qū)е碌母溉萜魉莸膯?wèn)題。
• 方法一：在浮動(dòng)元素之后添加一個(gè)DIV，然后對(duì)其設(shè)置clear:both；屬性，來(lái)完成清除浮動(dòng)，缺點(diǎn)是增加了一個(gè)無(wú)意義的標(biāo)簽。
• 方法二：使父元素形成BFC。（例如：對(duì)父元素添加overflow:hidden屬性。）
• 方法三：在最后一個(gè)元素后添加一個(gè)after偽類(lèi)，然后再偽類(lèi)中設(shè)置clear:both屬性，效果和方法一一樣，但是不會(huì)增加一個(gè)無(wú)意義的標(biāo)簽，相對(duì)來(lái)說(shuō)用的最多的一種方法。

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

• 相對(duì)定位:對(duì)元素設(shè)置position:relative;便是對(duì)元素設(shè)置相對(duì)定位，表示相對(duì)于元素本身正常位置進(jìn)行定位，正常文檔流中的其他元素會(huì)感覺(jué)元素還在原來(lái)位置，不會(huì)進(jìn)行變動(dòng)。
• 絕對(duì)定位:對(duì)元素設(shè)置position:absolute;便是對(duì)元素設(shè)置絕對(duì)定位，他是相對(duì)于static定位以外的第一個(gè)祖先元素（offset parent）進(jìn)行定位,元素的位置通過(guò) left, top, right 以及 bottom 屬性進(jìn)行規(guī)定。
• static正常定位:默認(rèn)值，沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）
• 固定定位:position:fixed屬性是固定定位，也是相對(duì)于瀏覽器窗口進(jìn)行絕對(duì)定位。元素的位置和絕對(duì)定位一樣通過(guò) left, top, right 以及 bottom 屬性進(jìn)行規(guī)定。

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

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

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

• 二者區(qū)別為:position:relative不會(huì)改變普通文檔流之中其他元素的位置，其他元素還是會(huì)認(rèn)為設(shè)置了position:relative的元素在原來(lái)的位置，但是設(shè)置marin來(lái)讓元素移動(dòng)，會(huì)占用移動(dòng)后的和移動(dòng)前的空間，也會(huì)影響后面的元素的位置。

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

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

image.png

子元素因?yàn)樵O(shè)置了浮動(dòng)，所以父元素塌陷了。

image.png

對(duì)父元素設(shè)置overflow:hidden;形成BFC，清除浮動(dòng)。

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

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

• 父子外邊距合并范例:

  
  
  image.png
  
  

  可以看出此時(shí)因?yàn)楦缸釉刂g并沒(méi)有邊框、內(nèi)邊距、內(nèi)聯(lián)元素、清除浮動(dòng)這四條屬性，上邊距已經(jīng)合并了。

image.png

設(shè)置浮動(dòng)屬性之后，外邊距合并消失。當(dāng)然如果設(shè)置邊框、內(nèi)邊距、內(nèi)聯(lián)元素其他任何一種，外邊距合并也會(huì)消失。綜合考慮是：設(shè)置對(duì)網(wǎng)頁(yè)影響最小的一個(gè)因素。