1. 浮動元素的特征姓蜂，對其他浮動元素、普通元素俊扳、文字的影響
浮動模型是一種可視化格式模型，浮動元素可以左右移動（根據float屬性值而定）猛遍，直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣馋记。浮動元素不在文檔的普通流中，文檔的普通流中的元素表現的就像浮動元素不存在一樣.
- 對父元素的影響：正常情況下即在沒有浮動的時候懊烤，父元素的高度由子元素來撐開梯醒，元素浮動之后，父元素中好像什么都沒了腌紧，高度消失茸习。
- 對其他浮動元素的影響：多個浮動元素相鄰，如果包含塊太窄無法容納水平排列的全部浮動元素壁肋，那么其它浮動元素會向下移動号胚，直到有足夠的空間籽慢，而如果浮動元素的高度不同，那么向下移動的時候可能會被卡住猫胁。
- 對普通元素的影響：普通元素在占據浮動元素原來占據的空間箱亿，并被浮動元素遮擋。
- 文字的影響：文字可以發(fā)現浮動元素弃秆，并留出空間届惋。
2.清除浮動指什么？如何清除浮動菠赚？
清除浮動是指消除浮動元素對其父元素因浮動造成的高度塌陷的問題脑豹。
- 在父元素最后添加一個空的div，并設置屬性
clear:both.但是這種方法并不好衡查，會添加一個無意義的標簽瘩欺。 - BFC清除，給父元素添加以下屬性使其生成一個BFC包圍浮動元素
- float:left/right
- overflow:hidden/auto/scrool
- display: table-cell / table-caption / inline-block
- position: absolute / fixed
- 最常見的最實用的清除浮動方式和1類似拌牲，不過是用偽元素代替div击碗，給父元素添加一個類，如clearfix们拙，再給這個類添加以下樣式：
.clearfix{
*zoom:1; /*使ie6稍途，7的hasLayout為true,達到和BFC相同效果*/
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
3.定位方式
| 方式 | 屬性 | 參考點 | 使用場景
| ---
|static| 默認文檔流，不定位 | / | 正常文檔流
| relative | 生成相對定位的元素砚婆，相對于元素本身正常位置進行定位 | 本身正常位置 | 為絕對定位設定參照物或對元素自身位置進行局部調整
| absolute | 生成絕對定位元素械拍，相對于static定位以外的第一個祖先元素（offset parent）進行定位,元素的位置通過left,top,right以及bottom屬性進行規(guī)定 | 非static定位的第一個祖先元素 | 當想讓元素參照特定參照物進行定位時使用
| fixed | 生成絕對定位的元素，相對于瀏覽器窗口進行定位装盯。元素的位置通過left,top,right以及bottom屬性進行規(guī)定 | viewport | 當需要相對于viewport進行定位時使用
4.z-index的作用
z-index是有定位屬性relative/absolute/fixed的元素才起作用坷虑，值越大的越排在上面，z-index值大的定位元素可以遮擋住值小的元素埂奈。也就是說z-index的使用要配合position:relative/absolute/fixed來使用迄损。
補充：z-index的比較是在同級元素之間進行，具體可見例子：http://js.jirengu.com/ceheqetofu/2/edit
d2的z-index最大账磺，可是并不是在最上面芹敌，可見是先比較都是父級且為兄弟元素d1和d3的層級關系。還有一點比較在意垮抗，如果d1的z-index不設置氏捞，那么就比較d2與d3的z-index http://js.jirengu.com/mesupolozo/4/edit 。大多情況是比較兄弟 元素之間的層級的
5.position:relative和負margin使元素偏移的區(qū)別
- position:relative元素偏移前的空間還保留在那冒版，視覺上發(fā)生偏移液茎，也就是說這種方式不會影響文檔流。
- 負margin是真正的發(fā)生了偏移，原來的位置不復存在捆等，影響了文檔流滞造。
6.BFC是什么？如何生成栋烤？有什么作用谒养？
BFC（Block Format Content），即塊級格式化上下文班缎。對浮動蝴光、定位（絕對定位她渴、固定定位）元素达址、塊級容器（如inline-block、 table-cell趁耗、table-caption）并不是塊級盒子沉唠，還包括那些overflow屬性值取值visible以外的塊級盒子，會為它們的內容創(chuàng)建一個新的塊級格式化上下文苛败。
-
生成BFC可以給元素加以下屬性
- float:left/right
- overflow:hidden/auto/scrool
- display: table-cell / table-caption / inline-block
- position: absolute / fixed
-
BFC的作用
- BFC可以解決margin重疊問題满葛。margin重疊是指處于同一個BFC的相鄰元素、嵌套元素罢屈，只要它們之間沒有阻擋（如：邊框嘀韧、非空內容、padding等）就會發(fā)生margin重疊缠捌。這時只要讓其中一個元素生成新的BFC就能解決margin重疊問題锄贷。
- BFC可以清除浮動影響。因為BFC可以包含浮動曼月，所以讓父容器生成新的BFC可以讓父容器在視覺上包圍了浮動的子元素谊却，因而清除了子元素浮動造成父容器高度塌陷問題。
7.在什么場景下會出現外邊距合并哑芹？如何合并炎辨？如何不讓相鄰元素外邊距合并？
外邊距合并：當兩個垂直外邊距相遇時聪姿，即當一個元素出現在另一個元素上面時碴萧，第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并，它們將形成一個外邊距合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者末购。
- 相鄰兄弟元素
如例子中 http://js.jirengu.com/sitinevulo/2/edit 勿决，總高度是350px,div1高200px，div2高100px,div1的下邊距是50px招盲，常理來說低缩，此時div2的上邊距為0才能保證div2不超出大div的范圍，但例子中div2也確實有20px的上邊距，結果是即使有20px的上邊距div2也沒有超出大div咆繁，原因就是邊距發(fā)生了重疊讳推，并取了其中較大者。要使其不合并玩般，就如下面例子 http://js.jirengu.com/najuvogowa/2/edit 給div2添加float屬性生成新的BFC即可 - 父子元素
如例 http://js.jirengu.com/bakobovopa/2/edit ,大div沒有上邊距银觅，div1有上邊距50px，兩者合并坏为，取了較大值div1的上邊距50px究驴，所以大div距離頂部50px，解決方法同樣的匀伏，給div1添加float屬性即可http://js.jirengu.com/zoguxodayo/2/edit
補充：當要合并的margin其中一個為負值的時候洒忧，要計算一下，不是簡單的取大值（正值够颠，負值當然比正值形跏獭），計算方法相加履磨，得出最終的合并后的margin值 http://js.jirengu.com/hibetateyo/2/edit 蛉抓。當兩個都為負值的時候，就取絕對值大margin值那個負margin http://js.jirengu.com/zezesuyaje/2/edit 剃诅。
