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

• 浮動(dòng)之后的元素將不會(huì)再文檔的普通流中，可以用float屬性控制其左右移動(dòng)，碰到邊框外緣或者碰到其他浮動(dòng)元素就會(huì)停止。

對(duì)父容器影響:

如果父元素里全部子元素都是浮動(dòng)元素，那么父容器會(huì)塌陷（因?yàn)闊o(wú)法識(shí)別里面的元素）。

對(duì)其他浮動(dòng)元素影響:

如果其它元素也設(shè)置浮動(dòng)遇到它會(huì)停止，如果父容器寬度撐不起浮動(dòng)元素，則最后的元素將會(huì)換到下一行，換到下一行遇到浮動(dòng)元素可能會(huì)被卡住。

對(duì)普通元素影響：

普通元素會(huì)識(shí)別不了浮動(dòng)元素，就會(huì)產(chǎn)生重疊，遮擋。

對(duì)文字有什么影響：

文字不同普通元素，會(huì)識(shí)別到浮動(dòng)元素，所以就會(huì)被浮動(dòng)元素隔開(kāi)，在浮動(dòng)元素周圍圍繞。

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

• 清楚浮動(dòng)是指 允不允許 設(shè)置元素 周圍 存在 浮動(dòng)元素。

清除浮動(dòng)的方式：

1.在你想不參與浮動(dòng)的元素上設(shè)置clear：left/right/both；
2.在父元素的子元素最后添加一個(gè)空的div，并設(shè)置clear：both；
3.利用css
.clearfix{*zoom: 1;}
.clearfix:after{content:"";display:block;clear:both}

Paste_Image.png

然后把class名添加到要清楚浮動(dòng)的父元素上。和第二部相似，只不過(guò)用css實(shí)現(xiàn)。
4.把父元素設(shè)置為BFC:

float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;

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

• inherit：從父元素繼承；

• static：默認(rèn)值，元素出現(xiàn)在正常的文檔流中。

• relative：相對(duì)定位。相對(duì)于元素本身的位置進(jìn)行定位，可以設(shè)置top，left，right，bottom進(jìn)行調(diào)整。
  *** 使用場(chǎng)景：為絕對(duì)定位設(shè)置參照物。或者自己本身需要局部調(diào)整。

• absolute：絕對(duì)定位。相對(duì)于static定位以外的第一個(gè)祖元素進(jìn)行定位，一層一層往上找，如果都沒(méi)有，則相對(duì)于HTML進(jìn)行定位。
  *** 使用場(chǎng)景：當(dāng)想讓元素參照特定參照物進(jìn)行定位時(shí)使用。

• fixed：固定定位。相對(duì)于瀏覽器進(jìn)行定位，無(wú)論怎么滾動(dòng)都會(huì)變化位置。

• sticky：對(duì)象在常態(tài)時(shí)遵循普通流。

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

• z-index：就是網(wǎng)頁(yè)的z軸，用相對(duì)定位絕對(duì)定位把兩個(gè)層重疊在一起。
  因?yàn)榻^對(duì)定位的元素脫離了普通流，所以，絕對(duì)定位的元素會(huì)覆蓋在別的元素上面，這是時(shí)候可以設(shè)置z-index的值來(lái)控制堆疊的順序，設(shè)置誰(shuí)在上面，誰(shuí)在下邊。并且z-index可以設(shè)置為負(fù)值。

• 關(guān)于z-index誰(shuí)上誰(shuí)下：
  1.如果z-index相同：發(fā)生位置重疊，那么按照文檔流，后面的覆蓋前面的。
  2.如果兩個(gè)元素都設(shè)置了z-index：，數(shù)值越大，則越靠近觀察者。
  3.如果一個(gè)元素設(shè)置了定位，另外一個(gè)沒(méi)有設(shè)置，則定位的覆蓋未定位的。
  4.如果父元素z-index有效，那么子元素?zé)o論是否設(shè)置了z-index都和父元素一致，會(huì)在父元素的上方。
  5.如果父元素未定位，子元素定位了，父元素設(shè)置了z-index，父元素會(huì)失效，子元素會(huì)生效。
  6.z-index默認(rèn)值是auto，則不建立層疊的上下文。設(shè)置為0，則會(huì)建立層疊上下文。

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

• position:relative；這個(gè)即使設(shè)置移動(dòng)坑還會(huì)在。位置還是以前的位置，只不過(guò)我們?nèi)庋劭吹剿苿?dòng)了。
• 負(fù)margin：元素的顯示位置和在文檔流中的位置均發(fā)生變化，會(huì)影響后面元素在文檔流中的位置。

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

• BFC就是塊級(jí)格式上下文。浮動(dòng)、絕對(duì)定位（絕對(duì)定位、固定定位）元素、塊級(jí)容器（如inline-block、 table-cell、table-caption）并不是塊級(jí)盒子，還包括哪些overflow屬性值取值visible以外的塊級(jí)盒子，會(huì)為它們的內(nèi)容物創(chuàng)建一個(gè)新的塊級(jí)格式化上下文。

生成BFC：

float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;

BFC 有什么作用：
1.可以解決外邊框margin重疊問(wèn)題。
2.可以用來(lái)清除浮動(dòng)，但是多多少少會(huì)有缺陷，所以要結(jié)合場(chǎng)景來(lái)使用。
舉個(gè)例：

Paste_Image.png

你看h1怎么樣都撐不開(kāi)，明明都設(shè)置了margin，但只有左右生效。這時(shí)候就要讓div這個(gè)父元素變成BFC，加一點(diǎn)限制。

Paste_Image.png

再來(lái)個(gè)例子：

Paste_Image.png

父元素的所有子元素都浮動(dòng)了，父元素就塌陷了，變得無(wú)法識(shí)別自己的子元素。這時(shí)候把父元素變成BFC；

Paste_Image.png

成功了??！

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

• 垂直外邊框合并:當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距，較大的優(yōu)先顯示。

Paste_Image.png

解決辦法：讓兩個(gè)元素在不同的BFC中；

Paste_Image.png

• 另外 如果margin為負(fù)值：

.如果兩個(gè)margin都為負(fù)值：哪個(gè)值小，顯示哪個(gè)值，然后從0位置，負(fù)向位移。

.如果正有負(fù)的時(shí)候：先取出負(fù) margin 中絕對(duì)值中最大的，然后，和正 margin 值中最大的 margin 相加。

.所有在隔壁的margin都要一起參與運(yùn)算，不能說(shuō)分布進(jìn)行。

• 父子外邊距合并
  
  Paste_Image.png
  
  解決辦法，給父元素添加限制，例如border，padding，overflow：hidden/auto； display：inline-block；