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

• 特征
  1.浮動(dòng)元素脫離文檔流齐邦，按照其外邊距指定的位置相對(duì)于它的上一個(gè)塊級(jí)元素（或父元素）顯示
  2.浮動(dòng)元素后面的塊級(jí)元素的內(nèi)容會(huì)向此浮動(dòng)元素的外邊距靠齊椎侠，但是邊框和背景卻忽略浮動(dòng)元素而向上一個(gè)任意非浮動(dòng)元素靠齊
  3.浮動(dòng)元素外邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的框的邊緣會(huì)停下
  4.普通流中的文字將會(huì)圍繞浮動(dòng)元素

• 影響
  對(duì)父容器的影響：如果父容器的子元素都是浮動(dòng)元素，那么父容器會(huì)失去高度措拇，在浮動(dòng)元素之外我纪。視覺上，父容器沒有包含住浮動(dòng)的子元素丐吓。
  其它浮動(dòng)元素的影響：如果包含塊太窄無法容納水平排列的全部浮動(dòng)元素浅悉，那么其它浮動(dòng)元素會(huì)向下移動(dòng)，直到有足夠的空間券犁，而如果浮動(dòng)元素的高度不同术健，那么向下移動(dòng)的時(shí)候可能會(huì)被卡住。
  普通元素的影響：普通元素會(huì)視浮動(dòng)元素不見粘衬，占據(jù)浮動(dòng)元素原有的位置荞估，但會(huì)被浮動(dòng)元素遮罩。
  對(duì)文字的影響：文字會(huì)感知到浮動(dòng)元素的存在稚新，會(huì)留出空間勘伺，形成環(huán)繞效果。

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

讓普通元素和文字不受浮動(dòng)元素的影響褂删，父容器感受到浮動(dòng)元素的存在

1.overflow:auto\hidden

.clearfix:after{
   content: " ";
   display: block;
   clear: left;
}

.clearfix:after{
   content: " ";
   display: table;
   clear: both;
}

.clearfix{
 *zoom: 1;
}

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

注意：只有定位元素position：srelative、absolute苍凛、fixed才可以設(shè)置top趣席、left、bottom醇蝴、right的值

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

控制疊放順序宣肚，z-index越高，元素的位置越靠上悠栓，只作用在有定位屬性為relative霉涨、absolute按价、fixed中的元素上。
z-index僅在設(shè)置了position非static屬性的元素生效笙瑟，且z-index的值只能在兄弟元素之間比較楼镐。

Z-index默認(rèn)值為auto,則不建立層疊上下文。設(shè)置為0則會(huì)建立層疊上下文往枷。
例子：

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

position:relative 不會(huì)影響其他元素位置框产，還占用原來的位置，可以單獨(dú)挪動(dòng)错洁。
負(fù)margin會(huì)影響到其他元素的位置秉宿。文檔流的位置發(fā)生偏移。

• 正常：

  
  

• 加了-margin：box1遮住了box屯碴，還帶著box2一起挪動(dòng)

  
  

• 加了position:relative：box和box2認(rèn)為box1還沒挪動(dòng)描睦，box1自己可以改位置

  
  

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

• BFC

block formatting contexts，塊級(jí)格式化上下文嗡载，容器里面的子元素不會(huì)影響到外面的元素。

• 生成 BFC的元素：

1.根元素
2.float屬性不為none
3.position為absolute或fixed
4.display為inline-block仍稀、flex洼滚、inline-flex
5.overflow不為visible

• 特性：

1.內(nèi)部的box會(huì)在垂直方向，一個(gè)接一個(gè)的放置技潘。
2.box垂直方向的距離由margin決定遥巴，屬于同BFC的兩個(gè)相鄰box的margin會(huì)發(fā)生重疊,如果是父子關(guān)系的box，子b元素的margin-left邊緣不會(huì)超過父元素的邊緣
3.BFC的區(qū)域不會(huì)與float box重疊
4.BFC是頁面上的一個(gè)隔離的獨(dú)立容器享幽，容器里面的子元素不會(huì)影響到外面铲掐，反之如此
5.計(jì)算BFC高度時(shí)，浮動(dòng)元素也參與計(jì)算

• 作用：

解釋margin邊距合并問題
發(fā)現(xiàn)浮動(dòng)元素contain float
不影響普通元素

• 例子：
  當(dāng)box元素是浮動(dòng)的時(shí)候值桩，只有main里的文字發(fā)現(xiàn)了浮動(dòng)元素
  
  
  給box加float:left;marin加overflow:auto;main發(fā)現(xiàn)浮動(dòng)摆霉，不與浮動(dòng)重疊。
  

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

垂直外邊距合并：兩個(gè)塊級(jí)元素垂直排列同時(shí)設(shè)置margin咳秉，相交部分margin合并婉支；合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。當(dāng)兩個(gè)外邊距都為負(fù)數(shù)時(shí)澜建，取其絕對(duì)值的較大者向挖，當(dāng)兩個(gè)外邊距為一正一負(fù)時(shí)蝌以，取兩者的和。
父子外邊距合并：
1 同一body的父子元素何之，給父元素中的子元素加margin跟畅，最后卻是整體的margin改變，而非父元素不動(dòng)子元素改變的效果
2 同一body的父子元素帝美，父元素沒有border碍彭、padding，子元素某些部分和父元素重疊

• 合并規(guī)則：

兩個(gè)margin都是正值的時(shí)候悼潭，取兩者的最大值庇忌；
當(dāng) margin 都是負(fù)值的時(shí)候，取的是其中絕對(duì)值較大的舰褪，然后皆疹，從0位置，負(fù)向位移占拍；
當(dāng)有正有負(fù)的時(shí)候略就，先取出負(fù) margin 中絕對(duì)值中最大的，然后晃酒，和正 margin 值中最大的 margin 相加表牢。
所有毗鄰的margin要一起參與運(yùn)算，不能分步進(jìn)行贝次。

• 解決方法:
  1 給父元素加border或padding崔兴，或者加 overflow:auto/hidden（比較穩(wěn)定），或利用clear蛔翅。
  2 不在一個(gè)普通流中或一個(gè)BFC中敲茄。
  3 margin在垂直方向上不毗鄰。
• 例子

子元素加margin-top父元素也跟著動(dòng)

父元素加了overflow后山析，子元素margin-top數(shù)值生效

父元素加padding：

父元素加clear：

注：clear有兩種方法適用于i8以上瀏覽器堰燎，只需根據(jù)需要更換.clearfix部分（父元素）的代碼即可。border的顏色可以設(shè)置為transparent（透明）笋轨。

經(jīng)過以上實(shí)驗(yàn)發(fā)現(xiàn)：

• 父元素加了border和padding,子元素margin秆剪、大小改變的數(shù)值超出父元素大小，不會(huì)撐大父元素爵政；
• 父元素加overflow:hidden,子元素margin鸟款、大小改變的數(shù)值超出父元素大小，有一部分子元素會(huì)被隱藏茂卦；父元素加overflow：auto何什，子元素大于父元素的話，父元素下面或者右側(cè)會(huì)有一個(gè)滾動(dòng)條等龙。
• 父元素加clear处渣，子元素margin伶贰、大小改變的數(shù)值超出父元素大小，父元素會(huì)被子元素?fù)未蟆?/li>

代碼題：

1.http://js.jirengu.com/pitecizaju/1/edit
2.http://js.jirengu.com/tikuyosiki/2/edit?html,css,output
3.http://js.jirengu.com/kifitulepa/2/edit
4.http://js.jirengu.com/kavifahiju/2/edit?html,css,output