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

浮動(dòng)元素不在文檔的普通流中，它可以根據(jù)float屬性值而左右移動(dòng)，直到它的外邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的框的邊緣才停止移動(dòng)。

• 對(duì)父容器的影響：如果父容器的子元素都是浮動(dòng)元素，那么父容器會(huì)失去高度，在浮動(dòng)元素之外。視覺(jué)上，父容器沒(méi)有包含住浮動(dòng)的子元素。
• 其它浮動(dòng)元素的影響：如果包含塊太窄無(wú)法容納水平排列的全部浮動(dòng)元素，那么其它浮動(dòng)元素會(huì)向下移動(dòng)，直到有足夠的空間，而如果浮動(dòng)元素的高度不同，那么向下移動(dòng)的時(shí)候可能會(huì)被卡住。
• 普通元素的影響：普通元素會(huì)視浮動(dòng)元素不見(jiàn)，占據(jù)浮動(dòng)元素原有的位置，但會(huì)被浮動(dòng)元素遮罩。
• 對(duì)文字的影響：文字會(huì)感知到浮動(dòng)元素的存在，會(huì)留出空間，形成環(huán)繞效果。

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

清除浮動(dòng)是指浮動(dòng)元素脫離文檔流，父元素?zé)o法感知浮動(dòng)元素的容量，如果父元素未設(shè)置高度值，父元素高度將無(wú)法只由浮動(dòng)元素?fù)伍_(kāi)，結(jié)合clear屬性讓父元素在視覺(jué)上包圍浮動(dòng)元素。清除浮動(dòng)的方法：

• 在父元素的子元素最后添加一個(gè)空div，并對(duì)其設(shè)置樣式：clear:both;
  由于在子元素最后添加了空div，并清除了浮動(dòng)，因此父容器被撐開(kāi)，實(shí)現(xiàn)了在視覺(jué)上包圍浮動(dòng)元素的效果。
• 利用BFC來(lái)清除浮動(dòng)。
  因?yàn)锽FC可以包含浮動(dòng)，因此可以讓父元素生成一個(gè)新的BFC從而包圍浮動(dòng)的子元素。
  可以對(duì)父元素設(shè)定以下樣式之一生成新BFC。
  float: left | right;
  overflow: hidden | auto | scroll;
  display: table-cell | table-caption | inline-block;
  position: absolute | fixed;
• 對(duì)父元素結(jié)合CSS特性的通用清除浮動(dòng)方案，其本質(zhì)還是第1種方法。

after偽類(lèi)： 元素內(nèi)部末尾添加內(nèi)容；
.clearfix{
  *zoom: 1;//用來(lái)觸發(fā) IE下 haslayout，使元素根據(jù)自身內(nèi)容計(jì)算寬高
}
.clearfix:after{
   content: “”; 
   display: block; 
   clear: both;
}

這個(gè)方法沒(méi)有副作用，但是并不是每一個(gè)清除浮動(dòng)都用這種方式，視情況而定

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

有6種定位方式：

• inherit：從父元素繼承；
• static：默認(rèn)值，沒(méi)有定位，元素出現(xiàn)在正常的文檔流中。參考點(diǎn)是文檔流中的位置。
• relative：相對(duì)定位。相對(duì)于元素本身正常位置進(jìn)行定位，通過(guò)top、bottom、left、right屬性來(lái)設(shè)置偏移量。使用場(chǎng)景：為絕對(duì)定位設(shè)定參照物或?qū)υ刈陨砦恢眠M(jìn)行局部調(diào)整。
• absolute：絕對(duì)定位。相對(duì)于static定位意外的第一個(gè)祖先元素進(jìn)行定位，若都沒(méi)有發(fā)現(xiàn)則以html標(biāo)簽為參考進(jìn)行定位。使用場(chǎng)景：當(dāng)想讓元素參照特定參照物進(jìn)行定位時(shí)使用。
• fixed：固定定位。生成絕對(duì)定位元素，相對(duì)于viewport進(jìn)行定位。
• sticky：對(duì)象在常態(tài)時(shí)遵循普通流。它就像是relative和fixed的合體，當(dāng)在屏幕中時(shí)按常規(guī)流排版，當(dāng)卷動(dòng)到屏幕外時(shí)則表現(xiàn)如fixed。兼容性差，不使用。

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

因?yàn)榻^對(duì)定位的元素脫離了普通流，所以絕對(duì)定位的元素可以覆蓋頁(yè)面上的其它元素。這時(shí)可以通過(guò)給元素設(shè)置z-index屬性來(lái)控制疊放順序，該屬性值越高，元素位置越靠上。

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

• position:relative;只相對(duì)自己原本位置發(fā)生偏移，不影響其它普通流中元素的位置。
• margin：除了讓元素自身發(fā)生偏移還影響其它普通流中的元素。

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

BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干。
BFC就是頁(yè)面上一個(gè)隔離出來(lái)了的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。
哪些元素會(huì)生成BFC?

• 根元素
• float: left|right
• overflow: hidden|auto|scroll
• display: table-cell|table-caption|inline-block
• position: absolute|fixed
  BFC具有特性：
  1、阻止垂直外邊距折疊：因?yàn)榭梢宰屒短椎脑胤謩e在不同的BFC就可以阻止它們外邊就折疊了。
  2、BFC不會(huì)重疊浮動(dòng)元素
  3、BFC可以包含浮動(dòng)，可以利用這一條特性來(lái)清除浮動(dòng)，設(shè)置父元素為BFC，就可以清除浮動(dòng)，但是這樣做都會(huì)有一些負(fù)作用，要根據(jù)實(shí)際情況選擇不同的方式。

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

外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。

• 兩個(gè)兄弟元素在垂直方向上合并外邊距，取較大值進(jìn)行合并。
• 父子元素間沒(méi)有阻擋（如：邊框、非空內(nèi)容、padding等）時(shí)發(fā)生上和/或下外邊距合并。

當(dāng)為parent容器加上邊框后，則能正常顯示外邊距

阻止父子元素外邊距合并的辦法：形成BFC可以阻止外邊柜合并或者元素上加上border或者padding