1.浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?
浮動元素不在文檔的普通流中，它可以根據(jù)float屬性值而左右移動，直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣才停止移動。
對父容器的影響：如果父容器的子元素都是浮動元素，那么父容器會失去高度，即父容器高度塌陷。視覺上，父容器沒有包含住浮動的子元素。
其它浮動元素的影響：如果包含塊太窄無法容納水平排列的全部浮動元素，那么其它浮動元素會向下移動，直到有足夠的空間，而如果浮動元素的高度不同，那么向下移動的時候可能會被卡住。
普通元素的影響：普通元素會視浮動元素不見，占據(jù)浮動元素原有的位置，但會被浮動元素遮擋。
對文字的影響：文字會感知到浮動元素的存在，會被擠到浮動元素的外邊，形成環(huán)繞效果。
2.清除浮動指什么? 如何清除浮動? 兩種以上方法
清理浮動:解決浮動父容器高度塌陷問題，讓父元素在視覺上包圍浮動元素
三種方法：
（1）利用 clear屬性，清除浮動
在父元素的子元素最后添加一個空div，并對其設置樣式：clear:both;清除浮動，實現(xiàn)了父容器在視覺上包圍浮動元素的效果。缺點是增加了一個無意義的標簽。
（2）利用BFC來清除浮動。
因為BFC可以包含浮動，因此可以讓父元素生成一個新的BFC從而包圍浮動的子元素。可以對父容器添加這些屬性,形成新的BFC達到“清浮動”效果，但存在局限性。
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;
(3)通過在父元素后面添加一個偽元素，設置為 block并清除左右浮動解決問題，其本質還是第1種方法。（此方法最佳）
.clearfix{*zoom: 1;} （此語句適用于IE6、7）
.clearfix:after{content: ""; display: block; clear: both;}（此語句適用于IE8及以上，沒有副作用）
將display設置為block是因為:after是偽元素，要想獲得clear屬性必須將他轉換為block。
3.有幾種定位方式，分別是如何實現(xiàn)定位的，參考點是什么，使用場景是什么？
CSS position屬性用于指定一個元素在文檔中的定位方式。top，right，bottom和 left 屬性則決定了該元素的最終位置。
static | relative | absolute | sticky | fixed
| position值 | 含義 |
|---|---|
| inherit | 規(guī)定應該從父元素繼承 position 屬性的值 |
| static | 默認值，沒有定位，元素出現(xiàn)在正常的流中 |
| relative | 生成相對定位的元素，相對于元素本身正常位置進行定位，并未脫離文檔流，且元素顯示位置發(fā)生變化，但元素在文檔流中的位置不變，不影響后面元素原本在文檔流中的布局。 |
| absolute | 絕對定位的元素則脫離了文檔流，不占據(jù)空間。絕對定位的元素的位置是相對于距離最近的非static的祖先元素位置決定的。如果元素沒有已定位的祖先元素，則以html標簽為參考進行定位。使用場景：當想讓元素參照特定參照物進行定位時使用。 |
| fixed | 固定定位。生成絕對定位的元素，相對于 viewport 視口。 |
| sticky | CSS3新屬性，可認為是position:relative和position:fixed的合體。元素在跨越特定閾值前為相對定位，之后為固定定位。它主要用在對scroll事件的監(jiān)聽上；簡單來說，在滑動過程中，某個元素距離其父元素的距離達到sticky粘性定位的要求時(比如top：100px)；position:sticky這時效果相當于fixed定位。 |
4.z-index 有什么作用? 如何使用?
z-index 屬性置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。z-index僅在定位元素上奏效（設置了position非static屬性的元素），且z-index的值只能在兄弟元素之間比較。
因為絕對定位的元素脫離了普通流，所以絕對定位的元素可以覆蓋頁面上的其它元素。這時可以通過給元素設置z-index屬性來控制疊放順序，擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
z-index有三個屬性auto | number | inherit
| z-index屬性值 | 說明 |
|---|---|
| auto | 默認值，不建立層疊上下文。 |
| number | 無單位的整數(shù)值，可為負數(shù) 。z-index值較大的元素將疊加在z-index值較小的元素之上。對于未指定此屬性的定位對象，z-index 值為正數(shù)的對象會在其之上，而 z-index 值為負數(shù)的對象在其之下。設置為0會建立層疊上下文。 |
| inherit | 從父元素繼承 z-index 屬性的值。 |
5.position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
- position:relative，元素顯示位置發(fā)生變化，但是元素在文檔流中的位置不變，不影響后面元素原本在文檔流中的布局。
- 負margin，元素的顯示位置和在文檔流中的位置均發(fā)生變化，會改變后面元素原本在文檔流中的位置。
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
在解釋 BFC 是什么之前，需要先介紹 Box、Formatting Context的概念。
Box: CSS布局的基本單位
Box 是 CSS 布局的對象和基本單位， 直觀點來說，就是一個頁面是由很多個 Box 組成的。元素的類型和 display 屬性，決定了這個 Box 的類型。 不同類型的 Box， 會參與不同的 Formatting Context（一個決定如何渲染文檔的容器），因此Box內的元素會以不同的方式渲染。讓我們看看有哪些盒子：
- block-level box:display 屬性為 block, list-item, table 的元素，會生成 block-level box。并且參與 block fomatting context (BFC)；
- inline-level box:display 屬性為 inline, inline-block, inline-table 的元素，會生成 inline-level box。并且參與 inline formatting context；
- run-in box: css3 中才有。
Formatting context
Formatting context 指頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。
BFC 定義
BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區(qū)域，只有block-level box參與， 它規(guī)定了內部的block-level box如何布局，并且與這個區(qū)域外部毫不相干。
BFC布局規(guī)則：
- 內部的Box會在垂直方向，一個接一個地放置。
- Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
- 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
- BFC的區(qū)域不會與float box重疊。
- BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
- 計算BFC的高度時，浮動元素也參與計算
如何生成 BFC
對元素設置以下屬性，就會為它們的內容物創(chuàng)建一個新的塊級格式化上下文。
- float: left | right;
- overflow: hidden | auto | scroll;
- display: table-cell | table-caption | inline-block;
- position: absolute | fixed;
| overflow屬性值 | 描述 |
|---|---|
| visible | 默認值。內容不會被修剪，會呈現(xiàn)在元素框之外。 |
| hidden | 內容會被修剪，并且其余內容是不可見的。 |
| scroll | 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。 |
| auto | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。 |
| inherit | 規(guī)定應該從父元素繼承 overflow 屬性的值。 |
BFC作用
- 解決margin重疊問題。所謂margin重疊是指處于同一個BFC的相鄰元素、嵌套元素，只要它們之間沒有阻擋（如：邊框、非空內容、padding等）就會發(fā)生margin重疊。這是只要讓其中一個元素生成新的BFC就能解決margin重疊問題。
- 清除浮動。因為BFC可以包含浮動，所以讓父容器生成新的BFC可以讓父容器在視覺上包圍了浮動的子元素，因而清除了浮動。
7.在什么場景下會出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
簡單地說，外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。
注釋：只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并。行內框、浮動框或絕對定位之間的外邊距不會合并。
出現(xiàn)外邊距合并的3個場景
1.相鄰的兄弟元素之間的外邊據(jù)合并，需要滿足同屬于一個BFC時。
2.父子元素的外邊距合并。需要滿足父元素沒有border和paddinng隔開
3.空元素的外邊距合并。
合并規(guī)則
1.兩個margin都是正值的時候，取兩者的最大值；
2.當 margin 都是負值的時候，取的是其中絕對值較大的，然后，從0位置，負向位移；
3.當有正有負的時候，先取出負 margin 中絕對值中最大的，然后，和正 margin 值中最大的 margin 相加。
4.所有毗鄰的margin要一起參與運算，不能分步進行。
解決外邊距合并
1. 相鄰的兄弟元素之間的外邊據(jù)合并
不讓相鄰元素外邊距合并的方法：
因為相鄰的兄弟元素之間的外邊據(jù)合并，需要滿足同屬于一個BFC。所以我們讓某個兄弟元素新生成一個BFC即可去除外邊距合并。設置以下屬性：
float: left | right;
overflow: hidden | auto | scroll;（即overflow不為visible）
display: table-cell | table-caption | inline-block;
position: absolute | fixed;
注意，在形成BFC的方式中（float為left/right，display的值為inline-block、table-cell、table-caption）這兩個能直接起效果，position為absolute/fixed還需指定top值。但（overflow的值為auto或者hidden）這個必須外面還要包裹一層父元素。
2. 父子元素之間的外邊據(jù)合并
消除外邊距合并的方式一：給父元素加邊框
消除外邊距合并的方式二：給父元素加padding
父子外邊距合并的范例
外邊距合并的意義
