1.浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?
- 特征：
浮動元素脫離普通文檔流，普通文檔流的元素無法識別浮動元素，所以會視其不存在。但是float浮動還是會被其中的行內元素所識別，比如說文本之類的。浮動元素在脫離普通文檔流之后，會相對其父元素的內邊框靠攏。元素在設置float屬性浮動之后，元素的display屬性變更為block。 - 影響：
1.對父容器來說，浮動元素貼著內邊距排列，父容器不識別浮動元素，所以浮動元素的內容無法撐開父容器。
2.對于float的浮動元素來說，他們是同一文檔流，他們之間可以相互識別，所以float浮動元素相互之間緊貼排列。對于position元素來說，他們的浮動相互之間不識別并且他們跟普通的文檔流和float浮動元素都不識別，所以他們之間可以相互重疊，設置z-index使之按照理想的情況重疊。
3.普通元素無法識別浮動元素，所以普通元素仍按照普通文檔流就行布局。
4.文字可以識別出浮動元素，所以文字的排列會環(huán)繞浮動元素。
2.清除浮動指什么? 如何清除浮動? 兩種以上方法
清除浮動指的是元素在浮動之后會帶來一些副作用，我們需要將這些副作用清除掉，這個過程就叫做清除浮動。浮動所帶來的副作用主要有以下三種：
1.父容器高度塌陷。
2.文本識別出了浮動元素，出現(xiàn)在浮動元素體內。
3.浮動元素與其他元素重疊，影響了整體樣式效果。
清除浮動的方法：
1.在父容器中的最后加一個塊級元素標簽，一般使用div,寫入樣式clear:both;，但這種方法增加了多余的標簽，不符合標簽語義化的規(guī)則，所以不推薦。
2.跟第一種方法是同一種原理，不過卻是利用偽元素來實現(xiàn)，具體代碼如下：
.clearfix{
*zoom: 1;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
第二種方法不增加額外的標簽，而且很好的解決了父容器高度塌陷的問題，所以一般使用第二種方法。另外上面有兩個樣式，第一個樣式其實也可以不寫，因為那是針對低版本的IE瀏覽器，IE6，IE7的兼容性設置的?，F(xiàn)在我們兼容性一般都是IE9起步了，畢竟淘寶都不支持IE8了。
3.使父元素成為一個BFC，由于BFC的特性：可以包含浮動元素，所以達到了清除浮動的效果。
3.有幾種定位方式，分別是如何實現(xiàn)定位的，參考點是什么，使用場景是什么？
有5種定位方式。
1.inherit，繼承父容器的定位屬性，使用場景無，一般我們不使用這個來進行定位。
2.static，默認值，沒有定位屬性，處于普通的文檔流中，沒有top right bottome left z-index這些屬性。
3.relative，相對定位，參考點為元素自身，通過設置top right bottome left z-index來定位，一般上下選一個，左右選一個就可以實現(xiàn)定位了，比如top:0; right:0; 使用relative，他本身元素所占空間仍然存在。使用場景一般是為了給子元素一個參考點，使子元素的absolute能夠正常使用。
4.absolute，絕對定位，倉考點為父容器的position屬性，可以是relative,absolute,fixed，一般我們使用relative。也是設置top right bottome left z-index來定位,但是與relative不同的是，他原本自身的空間不保留，使用場景一般為父容器的子元素進行定位。
5.fixed，固定定位，相對于瀏覽器窗口進行定位，也是使用top right bottome left z-index來定位，使用場景一般用于需要某個元素一直固定在頁面中的某個位置。
4.z-index 有什么作用? 如何使用?
作用：z-index為元素在頁面中的z軸的優(yōu)先級，即人跟電腦屏幕的直線距離，z-index值大的元素將覆蓋掉z-index值小的元素（一般情況下，特殊情況請往下看）。
使用條件： 當元素被定位時（absolute，relative，fixed），z-index才生效。
如圖，雖然b的z-index大于c，但是b卻并沒有覆蓋掉c，因為b未設置定位屬性，如圖：
but，當給b一個定位屬性position: relative; z-index生效了，b跑到了最前面。
注意事項：
- z-index的值的大小不一定決定堆疊順序，堆疊順序還與文檔流順序有關，比如父子關系中，父元素的z-index大于子元素的z-index，但是子元素卻覆蓋父元素，如圖：
- 在兄弟關系中，是由最高層的父元素z-index來決定子元素的堆疊順序，與子元素z-index無關，如圖，雖然d的z-index大于f，但是由于b的z-index小于c，所以f覆蓋了d，如圖：
5.position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative是相對于元素原本的位置進行偏移，偏移之后，原本的元素所占空間依舊保留。并且他將變成浮動元素，與其他所有元素都不識別。
負margin是子元素相對于父元素的內邊框進行偏移，偏移之后，原本的元素所占空間不保留。并且偏移之后元素仍處于正常文檔流中。
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
- 是什么？BFC是 block formatting context的縮寫，意思就是格式化內容文本。創(chuàng)建了一個BFC的元素就是一個獨立的盒子，只有block level box可以參與創(chuàng)建BFC，他的內部與外部都不受盒子外的元素的影響。
- 如何生成？可以給需要創(chuàng)建BFC的元素添加以下任意屬性：
1.float，除了none都可以。
2.overflow，設置為auto，hidden，scroll中的任意一個都可以。
3.position，設置為absolute,fixed都行。
4.display，設置為inline-block，table-cell，table-caption。 -
BFC的作用：
1.阻止垂直邊距的折疊。
如圖，當父元素為BFC的時候，父元素中的子元素他們的垂直外邊距不合并，所以他們的margin值都有效。
BFC.jpg
而當父元素不是BFC元素的時候，子元素h1的垂直邊距與父元素發(fā)生合并，導致子元素的margin值不是相對于父元素div，而是與父元素邊距合并之后，相對于body進行了一個margin值的偏移。如下圖。
2.BFC元素與浮動元素不重疊。
也就是說他們之間可以相互識別，不會重疊。還是看圖理解吧。下圖是非BFC的時候，浮動元素與BFC元素無法識別，所以兩者發(fā)生重疊。
當.bfc變成BFC元素時(添加了一個overflow: hidden)，浮動元素與BFC元素相互識別出來了，不重疊，如圖：
3.BFC元素可以包含浮動。
當一元素不為BFC時，他的子元素如果浮動了，假設他只有這一個子元素，那么由于該元素無法識別浮動元素，所以他的內容無法撐開，導致高度塌陷，所以這個時候，我們可以給該元素設置一個BFC，來清除浮動帶來的副作用。
如圖，父元素非BFC時，子元素浮動，父元素高度塌陷。
當父元素為BFC的時候，子元素浮動，父元素包含浮動子元素，父元素高度塌陷的問題得到解決，如圖：
7.在什么場景下會出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
合并場景：
-
當父元素不是BFC元素時，最靠近父元素的子元素的外邊距會與父元素的外邊距發(fā)生合并，也就是父元素和相鄰子元素發(fā)生了外邊距合并。如圖
非BFC.jpg - 當兩個塊元素上下相鄰，上面的元素有margin-bottom，下面的元素有margin-top ，然后margin-top和 margin-bottom取其中的較大值。如下圖：
從上圖可以看出，雖然兩個塊級元素都有外邊距，但是實際效果確實取值較大的邊距。
- 空元素不存在border、padding、height、line-height，它的上邊距將與下邊距合并，如圖：
2.如何合并:
- 父子關系中，子元素的外邊距變成父元素的外邊距。
- 兄弟關系中，兩者的外邊距合并成一個，取較大值。
- 空元素中，上邊距與下邊距合并成一個。
3.如何阻止相鄰外邊距合并：
- 父子關系中，可以給父元素設置BFC，border，padding。
- 兄弟關系中，可以設置float，inline-block，absolute。
- 還有一個小技巧，就是上下結構中，只寫一種間距，要么都是margin-top，要么都是margin-bottom。
4.范例，上面有一個父子外邊距合并的案例，這里就不重復了。
代碼
1.http://js.jirengu.com/kiya/1
2.http://js.jirengu.com/limo/1
3.http://js.jirengu.com/lonar/1
4.http://js.jirengu.com/koge/3
