1.浮動元素有什么特征？對父容器王凑、其他浮動元素、普通元素聋丝、文字分別有什么影響索烹？
浮動模型也是一種可視化格式模型，浮動的框可以左右移動（根據(jù)float屬性值而定）弱睦，直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣百姓。浮動元素不在文檔的普通流中，文檔的普通流中的元素表現(xiàn)的就像浮動元素不存在一樣.
-
對父容器的影響：當父容器的子元素都是浮動元素時况木，那么父容器將會高度坍塌。如下例：
-
對其他浮動元素影響： 如果包含塊兒太窄無法容納水平排列的三個浮動元素,那么其它浮動塊兒向下移動,直到有足夠的空間,如果浮動元素的高度不同,那么向下移動的時候可能被卡住。如下例：
-
對普通元素影響：浮動元素脫離普通流抢腐，如果浮動元素后面有個文檔流中的普通元素温数，那么這個普通元素的框會表現(xiàn)的浮動元素不存在。如下例：
-
對文字影響： 浮動元素后面的文檔流中的元素，這個元素的框會表現(xiàn)的像浮動元素不存在，但是框的文本內(nèi)容會受到浮動元素影響，會移動以留出空間宴倍。
浮動元素旁邊的行框被縮短,從而給浮動元素流出空間,因而行框圍繞浮動框。如下例：
2.清除浮動指什么仓技？如何清除浮動鸵贬？兩種以上方法
清理浮動：解決父容器高度坍塌問題
方法1
如果我們想讓父元素在視覺上包圍浮動元素可以在父元素最后添加一個空div，
<div style="clear:both;"></div>對它清理脖捻。缺點是增加了一個無意義的標簽阔逼，如下例：
方法2
使父容器生成BFC,因為BFC可以包含浮動，從而達到“清除浮動”效果地沮，如何形成浮動：
- float為 left|right
- overflow為 hidden|auto|scroll
- display為 table-cell|table-caption|inline-block
- position為 absolute|fixed
但是注意用BFC特性清理浮動都有副作用：比如float： left;讓父容器變成浮動元素
副作用較小的是： overflow： auto;或者overflow: hidden;
通用的清理浮動法案
/*方法1*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
/*方法2*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
3.有幾種定位方式嗜浮，分別是如何實現(xiàn)定位的，參考點是什么摩疑，使用場景是什么危融？
css定位方式有四種：默認定位（static）、相對定位（relative）雷袋、絕對定位（absolute）和固定定位（fixed）
static:默認值吉殃。沒有定位，元素在正常的流中,top,right,bottom,left和z-index屬性無效楷怒。
參考點：無relative:生成相對定位的元素蛋勺，通過top,bottom,left,right的位置相對于其原來位置進行定位。left:20px 會向元素的 left 位置添加20px
其中的相對指的是相對于元素在默認流中的位置鸠删。元素偏移之后迫卢，他本來在默認文檔流中占據(jù)的位置仍然存在，其緊挨其后的元素的定位依據(jù)它本來的位置定位
參考點：元素本身位置
使用場景：元素相對偏移
案例：
- absolute：生成絕對定位的元素冶共，相對于static定位外的第一個父元素進行定位。元素的位置通過 left, top, right 以及 bottom 屬性進行規(guī)定每界。
絕對定位的元素已經(jīng)脫離了文檔流捅僵，普通流中其他元素的布局就像絕對元素不存在一樣；絕對定位的元素的位置是相對于最近的已定位的祖先元素眨层，如果元素沒有已定位的祖先元素庙楚，它的位置就相對于body根元素；絕對定位的框可以覆蓋頁面的其他元素趴樱。
參考點：距離最近的非static元素馒闷，否則為body
使用場景：垂直水平居中
案例：
top: 20px; left:20px 相對的值是看其父容器是否存在 position：relative;absolute;fixed;這三個值酪捡，如果有就是相對父容器的內(nèi)邊框。
當父容器里有 絕對定位 的子元素時纳账，子元素設(shè)置width:100%實際上指的是相對于父容器的padding+content的寬度逛薇。當子元素是非絕對定位的元素時width:100%才是指子元素的 content 等于父元素的 content寬度查看范例http://js.jirengu.com/jatog/1/edit
-
fixed: 本質(zhì)上是一種絕對定位，不為元素預(yù)留空間疏虫。通過指定相對于屏幕視窗的位置來指定元素的空間永罚，且元素的位置在屏幕滾動時不會發(fā)生變化。應(yīng)用于很多網(wǎng)站頂端的固定導航卧秘、右下角的固定廣告等等呢袱。
參考點：瀏覽器窗口
使用場景：登錄框覆蓋層
注意只有position: relative; absolute; fixed;才能設(shè)置top left 等的值；
4.z-index有什么作用翅敌？如何使用羞福？
z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面蚯涮。如果為正數(shù)治专，則離用戶更近，為負數(shù)則表示離用戶更遠恋昼。Z-index 僅能在定位元素上奏效看靠。
5.position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別?
position:relative和負margin都可以使元素位置發(fā)生偏移,二者區(qū)別：
- position:relative相對定位后元素位置發(fā)生偏移，只是視覺上顯示的位置變化液肌，但是它仍會占據(jù)原來的空間挟炬，不會影響其他文檔流元素。
- 負margin會使元素在文檔流中位置發(fā)生偏移嗦哆，會影響周邊的元素位置變化
6.BFC 是什么谤祖？如何生成 BFC？BFC 有什么作用老速？舉例說明
- BFC:全稱是 [Block Format Content] ,塊級格式化上下文(http://www.w3.org/TR/CSS21/visuren.html#block-formatting)粥喜，
BFC特性：
1.BFC會阻止垂直外邊距（margin-top、margin-bottom）折疊
按照BFC的定義橘券，只有同屬于一個BFC時额湘，兩個元素才有可能發(fā)生垂直Margin的重疊，這個包括相鄰元素旁舰，嵌套元素锋华，只要他們之間沒有阻擋(例如邊框，非空內(nèi)容箭窜，padding等)就會發(fā)生margin重疊毯焕。
因此要解決margin重疊問題，只要讓它們不在同一個BFC就行了磺樱，但是對于兩個相鄰元素來說纳猫，意義不大婆咸，沒有必要給它們加個外殼，但是對于嵌套元素來說就很有必要了芜辕，只要把父元素設(shè)為BFC就可以了尚骄。這樣子元素的margin就不會和父元素的margin發(fā)生重疊
2.BFC不會重疊浮動元素
3.BFC可以包含浮動
- 生成BFC:
- float為 left|right
- overflow為 hidden|auto|scroll
- display為 table-cell|table-caption|inline-block
- position為 absolute|fixed
- BFC作用：
1.會阻止垂直外邊距（margin-top、margin-bottom）折疊
2.清除浮動
7.在什么場景下會出現(xiàn)外邊距合并物遇？如何合并乖仇？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
當塊處于同一個文檔流同一個BFC中询兴，兩個元素才有可能發(fā)生垂直Margin的重疊乃沙，這個包括相鄰元素，嵌套元素诗舰，只要他們之間沒有阻擋(例如邊框警儒，非空內(nèi)容，padding等)就會發(fā)生margin重疊眶根。對于父子元素蜀铲，容器沒有padding和border內(nèi)部的margin會導致外邊距合并。
相鄰元素box1和box2的垂直外邊距合并属百，如下例记劝，
合并規(guī)則：
1.兩個margin都是正值的時候，取兩者的最大值族扰；
2.當 margin 都是負值的時候厌丑，取的是其中絕對值較大的，然后渔呵，從0位置怒竿，負向位移；
3.當有正有負的時候扩氢，先取出負 margin 中絕對值中最大的耕驰，然后和正 margin 值中最大的 margin 相加。
如何不讓相鄰元素外邊距合并：
1.被非空內(nèi)容录豺、padding朦肘、border 或 clear 分隔開。
2.不在一個普通流中或一個BFC中双饥。
3.浮動元素媒抠、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其他元素的 margin 折疊（注意這里指的是上下相鄰的元素）兢哭。
父子外邊距合并見下例：
解決外邊距合并，讓父容器設(shè)為BFC就可以了夫嗓。給父容器加入overflow: auto;包裹h1迟螺，使得h1的margin內(nèi)部生效冲秽，從而不會margin合并。這樣子元素的margin就不會和父元素的margin發(fā)生重疊矩父。如下例：
參考http://blog.csdn.net/github_37037281/article/details/55505825
