1.浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?
浮動元素特征：
- 浮動元素會脫離正常的文檔流，按照其外邊距指定的位置相對于它的上一個塊級元素（或父元素）顯示
- 浮動元素后面的塊級元素的內容會向此浮動元素的外邊距靠齊，但是邊框和背景卻忽略浮動元素而向上一個任意非浮動元素靠齊
- 浮動元素后面的內聯元素會向此浮動元素的外邊距靠齊
浮動元素造成的影響：
- 對其父元素的影響
對于其父元素來說，元素浮動之后，它脫離當前正常的文檔流，所以它也無法撐開其父元素，造成父元素的塌陷 - 對其兄弟元素（非浮動）的影響
如果兄弟元素為塊級元素，該元素會忽視浮動元素的而占據它的位置，并且元素會處在浮動元素的下層（并且無法通過z-index屬性改變他們的層疊位置），但它的內部文字和其他行內元素都會環繞浮動元素。如果如果兄弟元素為內聯元素，則元素會環繞浮動元素排列。 - 對其兄弟元素（浮動）的影響
同一個方向的浮動元素：當一個浮動元素在浮動過程中碰到同一個方向的浮動元素時，它會緊跟在它們后面
反方向的浮動元素：互不影響，位于同一條水平線上，當空間不夠時會被擠下 - 對子元素的影響
當一個元素浮動時，在沒有清除浮動的情況下，它無法撐開其父元素，但它可以讓自己的浮動子元素撐開它自身，并且在沒有定義具體寬度情況下，使自身的寬度從100%變為自適應（浮動元素display:block）。其高度和寬度均為浮動元素高度和非浮動元素高度之間的最大值。
2.清除浮動指什么? 如何清除浮動? 兩種以上方法
清除浮動是指清除掉元素float屬性
清除浮動的方法:
1.添加新的元素 、應用 clear：both；
HTML：
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="clear"></div>
</div>
CSS：
.clear{
clear:both;
height: 0;
line-height: 0;
font-size: 0
}
2.使浮動元素的父容器變成BFC,父級div定義 overflow: auto等
HTML：
<div class="outer over-flow"> //這里添加了一個class
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<!--<div class="clear"></div>-->
</div>
CSS：
.over-flow{
overflow: auto;
zoom: 1; //zoom: 1; 是在處理ie6兼容性問題
}
3.div:after 方法：（注意：作用于浮動元素的父親）
.outer{
content:"";
display:block;
clear:both;
}
3.有幾種定位方式，分別是如何實現定位的，參考點是什么，使用場景是什么？
- inherit
規定應該從父元素繼承 position 屬性的值 - static
默認值,沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）
當你沒有為一個元素(例如div)指定定位方式時，默認為static，也就是按照文檔的流式(flow)定位，將元素放到一個合適的地方。所以在不同的分辨率下，采用流式定位能很好的自適合，取得相對較好的布局效果。left,top屬性對static沒有效果，static是靠margin這些定位的。 - relative
生成相對定位的元素，相對于元素本身正常位置進行定位,因此，left:20px 會向元素的 left 位置添加20px
相對定位的元素仍然在文檔流中，仍然占據著他本來占據的位置空間——雖然他現在已經不在本來的位置了。 - absolute
生成絕對定位的元素，相對于static定位以外的第一個祖先元素（offset parent）進行定位,元素的位置通過 left, top, right 以及 bottom 屬性進行規定
如果你想在一個文檔(Document)中將一個元素放至指定位置，你可以使用absolute來定位，將該元素的position設置為absolute，同時使用top,bottom,left,right來定位。
如果沒有父元素，位置是相對于body來進行的。
絕對定位會使元素從文檔流中被刪除，結果就是該元素原本占據的空間被其它元素所填充。 - fixed
生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 left, top, right 以及 bottom 屬性進行規定
fixed定位的參照物總是當前的文檔。利用fixed定位，我們很容易讓一個div定位在瀏覽器文檔的左上，右上等方位。 - sticky
CSS3新屬性，表現類似position:relative和position:fixed的合體，在目標區域在屏幕中可見時，它的行為就像position:relative; 而當頁面滾動超出目標區域時，它的表現就像position:fixed，它會固定在目標位置
兼容性較差，一般用JS實現
4.z-index 有什么作用? 如何使用?
z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
z-index只對定義元素有效
z-index的屬性值:
- auto 默認值
- number 類型,number越大,層級越高
- inherit 繼承父元素的z-index
5.position:relative和負margin都可以使元素位置發生偏移?二者有什么區別
position:relative和負margin都可以使元素位置發生偏移
- position:relative 相對于元素本身正常位置進行偏移，普通文檔流中的位置仍然保留，即原來位置會留有空白，
不影響周圍其他元素的布局。 - 負margin產生的偏移會影響周圍其他普通流中的元素的布局
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
BFC是什么
BFC是block formatting context 塊級格式化上下文的縮寫，是Web頁面中盒模型布局的CSS渲染模式。它的定位體系屬于常規文檔流。BFC是頁面上的一個隔離的獨立容器， 容器里面的子元素不會影響到外面的元素，反之也是如此。
如何生成BFC
給元素添加任何一個可以觸發BFC的css樣式，例如：overflow:hidden,overflow:scroll,display:table-cell,display:inline-block,float:left，float:right等
BFC有什么作用
- 解決margin重疊:同一BFC下,相鄰元素外邊距會出現重疊,此時改變其中一個元素的BFC就可以解決該問題(多用于嵌套關系)
- 清浮動:overflow:hidden/auto/scroll或display:inline-block，table-cell或float:left,right添加浮動等方式讓父級形成新的BFC
7.在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
合并場景
- 當一個元素出現在另一個元素上面時，第一個元素的底外邊距與第二個元素的頂外邊距會合并
- 當一個元素包含在另一個元素中時(假設沒有內邊距或邊框將外邊距分隔開)，它們的頂和/或底外邊距會合并
- 當一個空元素有外邊距，但沒有邊框或內邊距時，它的頂外邊距和底外邊距會發生合并，如果空元素與另一個非空元素相鄰，它們的外邊距仍然會發生合并。
注意：只有普通文檔流中塊框的垂直外邊距才會發生外邊距合并，行內框，浮動框或者絕對定位框之間的外邊距不會發生合并。
如何合并
- 兩個margin都是正值的時候，取兩者的最大值；
- 當 margin 都是負值的時候，取的是其中絕對值較大的，然后，從0位置，負向位移；
- 當有正有負的時候，先取出負 margin 中絕對值中最大的，然后，和正 margin 值中最大的 margin 相加。
- 所有毗鄰的margin要一起參與運算，不能分步進行。
禁止合并
- 被非空內容、padding、border 或 clear 分隔開。
- 不在一個普通流中或一個BFC中。
- margin在垂直方向上不相鄰。
范例
<style>
*{margin:0;padding:0;}
.parent{width:200px;height:200px;margin:10px 0;background:yellow;}
.child{width:50px;heightz:50px;margin:20px 0;background:blue;}
</style>
</head>
<body>
<divclass="parent">
<div class="child"></div>
</div>
</body>
