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

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

• 對(duì)父容器的影響：如果父容器內(nèi)的子元素是浮動(dòng)元素当窗，那么父容器會(huì)失去高度，形成父容器塌陷寸宵，在浮動(dòng)元素之外崖面。
• 對(duì)其它浮動(dòng)元素的影響：如果包含塊太窄無(wú)法容納水平排列的全部浮動(dòng)元素，那么其它浮動(dòng)元素會(huì)向下移動(dòng)梯影，直到有足夠的空間巫员，而如果浮動(dòng)元素的高度不同，那么向下移動(dòng)的時(shí)候可能會(huì)被“卡”住甲棍。
• 對(duì)普通元素的影響：普通元素感知不到浮動(dòng)元素简识，繼而占據(jù)浮動(dòng)元素原有的位置，但會(huì)被浮動(dòng)元素遮罩感猛。
• 對(duì)文字的影響：文字可感知到浮動(dòng)元素七扰，會(huì)留出空間，形成環(huán)繞的效果陪白。

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

1. 空標(biāo)簽清浮動(dòng):在父元素的子元素的最后添加一個(gè)沒(méi)有高度的空的塊標(biāo)簽颈走，并且設(shè)置屬性 clear:both;
2. 使父元素形成新的BFC，可以使用的屬性：

• overflow：hidden/auto/scroll
• display:inline-block
• float 等等

但是這類方法會(huì)帶來(lái)不同的副作用拷泽，需要考慮自身需求疫鹊，去選擇合適的屬性去實(shí)現(xiàn)效果。

3. 使用偽元素清楚浮動(dòng)司致。目前比較標(biāo)準(zhǔn)無(wú)副作用的實(shí)現(xiàn)方式：

.clearfix{
zoom:1;   /*此段是在確定IE6下也可實(shí)現(xiàn)效果*/
}
.clearfix:after{ 
content:"";
display:block;
visible:hidden;
clear:both;
}

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

定位的屬性：

這些屬性，比較常用的就是 relative常拓；absolute渐溶；fiexd三個(gè)屬性

對(duì)于新屬性sticky

sticky

可以看到，他的兼容性比較差弄抬，所以一般不使用它實(shí)現(xiàn)效果茎辐，而是采用javascrip來(lái)實(shí)現(xiàn)。

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ā)生偏移，不影響其它普通流中元素的位置斋配。

position:relative

margin：除了讓元素自身發(fā)生偏移還會(huì)影響其它普通流中的元素孔飒。

margin

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í)格式化上下文爬范。對(duì)元素設(shè)置以下屬性就可以生成BFC：
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;
原理大致是這樣：
在沒(méi)有BFC的情況下，兩塊的margin會(huì)相互折疊弱匪。
代碼：

<div style="width: 200px;height: 200px;background: #cccccc;margin-bottom: 30px;"></div>
<div style="width: 200px;height: 200px;background: #333333;margin-top: 30px;margin-bottom:30px;">   </div>
<div style="width: 200px;height: 200px;background: #666666;margin-top: 50px;"></div>

如圖：

alt text

<div style="overflow: auto;width: 100%;">
    <div style="float: left;width: 100%;">
        <div style="margin-bottom: 30px;width: 100px;height: 100px;background-color: #cccccc;"></div>
    </div>
    <div style="float: left;width: 100%;">
        <div style="margin-top: 50px;width: 100px;height: 100px;background-color: #333333;"></div>
    </div>
</div>

結(jié)果如下：

Alt text

可以看到搭儒，上面示例中的上面灰色div和下面黑色div的margin并沒(méi)有重疊穷当，這是因?yàn)槟莾蓚€(gè)float的父盒子在為它下面的盒子創(chuàng)建了一個(gè)BFC，從而將float盒子里面的子盒子給隔離了起來(lái)淹禾，因此也就不會(huì)margin折疊了，這只是創(chuàng)建BFC的一個(gè)方法茴扁，其它的還有overflow:hidden等铃岔，而在這個(gè)BFC下的盒子都是遵循BFC的布局規(guī)則的。
然后峭火，當(dāng)塊級(jí)盒block-level box外層沒(méi)有BFC作保護(hù)毁习，有margin折疊時(shí)，是這樣的：

而當(dāng)塊級(jí)盒block-level box外層有BFC作保護(hù)時(shí)(比如給下圖灰色邊框線盒子一個(gè)float:left)卖丸，則是這樣的：

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

外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)俊扭，它們將形成一個(gè)外邊距队橙。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。
（1）兩個(gè)兄弟元素在垂直方向上合并外邊距萨惑，取較大值進(jìn)行合并捐康。

#d1 {
  width:100px;
  height:100px;
  margin-bottom:20px;
}
#d2 {
  width:100px;
  height:100px;
  margin-top:10px;
}

這時(shí)兩個(gè)div在垂直距離上的外邊距進(jìn)行了合并，合并后的值是20px庸蔼。

（2）父子元素間沒(méi)有阻擋（如：邊框解总、非空內(nèi)容、padding等）時(shí)發(fā)生上和/或下外邊距合并姐仅。
例：

<div class=”parent”>
    <div class=”child”>
    </div>
</div>

.parent{
    width: 200px;
    height: 100px;
    margin-top:10px;
    background-color: red;
}
.child{
       width: 100px;
       height: 100px;
       margin-top:30px;
       background-color: yellow;
 }

這時(shí)就會(huì)發(fā)生合并花枫。合并后的外邊距是30px刻盐。

關(guān)于外邊距合并：

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

• 當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)佳簸，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并：

  
  
  CSS外邊距合并的問(wèn)題

代碼實(shí)驗(yàn)

• 當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒(méi)有內(nèi)邊距或邊框把外邊距分隔開）乙墙，它們的上和/或下外邊距也會(huì)發(fā)生合并：

  
  
  CSS外邊距合并的問(wèn)題

• 外邊距甚至可以與自身發(fā)生合并
  假設(shè)有一個(gè)空元素，它有外邊距生均，但是沒(méi)有邊框或填充听想。在這種情況下，上外邊距與下外邊距就碰到了一起马胧，它們會(huì)發(fā)生合并：

  
  
  自身發(fā)生合并

  如果這個(gè)外邊距遇到另一個(gè)元素的外邊距汉买，它還會(huì)發(fā)生合并：

  
  
  自身發(fā)生合并
  這就是一系列的段落元素占用空間非常小的原因，因?yàn)樗鼈兊乃型膺吘喽己喜⒌揭黄穑纬闪艘粋€(gè)小的外邊距。

外邊距合并的意義：

外邊距合并初看上去可能有點(diǎn)奇怪皂贩，但是實(shí)際上凯砍，它是有意義的。以由幾個(gè)段落組成的典型文本頁(yè)面為例。第一個(gè)段落上面的空間等于段落的上外邊距。如果沒(méi)有外邊距合并，后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和崔列。這意味著段落之間的空間是頁(yè)面頂部的兩倍。如果發(fā)生外邊距合并旺遮，段落之間的上外邊距和下外邊距就合并在一起赵讯，這樣各處的距離就一致了。

外邊距合并的意義

需要注意的是：只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并耿眉。行內(nèi)框边翼、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。
參考文獻(xiàn)

代碼題

代碼1
代碼2
代碼3
代碼4