浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?
浮動模型也是一種可視化格式模型，浮動的框可以左右移動（根據(jù)float屬性值而定），直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣。浮動元素不在文檔的普通流中，文檔的普通流中的元素表現(xiàn)的就像浮動元素不存在一樣.
demo
特征：
- 塊級元素浮動將并排顯示，不再獨占一行
- 內(nèi)聯(lián)樣式浮動將支持設置寬高，不僅支持margin-left(right)，而且開始支持margin-top(bottom)
- 浮動元素默認內(nèi)容撐開寬度
- 浮動元素脫離正常的文檔流
- 浮動元素提升半層級
影響
對父容器： 當元素設置為浮動時，父容器會當做它不存在，此時容易造成塌陷。
其他浮動元素： 如果包含塊兒太窄無法容納水平排列的三個浮動元素,那么其它浮動塊兒向下移動 ,直到有足夠的空間,如果浮動元素的高度不同,那么向下移動的時候可能被 卡住。
普通元素： 浮動會讓元素脫離普通流, 如果浮動的元素后面有一個文檔流中元素,那么這個元素的框會表現(xiàn)的像浮動元素不存在,但是框的文本內(nèi)容會受到浮動元素的影響,會移動以留出空間.用術語說就是浮動元素旁邊的行框被縮短,從而給浮動元素流出空間,因而行框圍繞浮動框
文字： 對于文字來說，能感知到浮動元素的存在，如果位置足夠，就能夠?qū)崿F(xiàn)文本圍繞的效果。
普通元素覆蓋和文字圍繞demo。
清除浮動指什么? 如何清除浮動? 兩種以上方法
清除浮動： 解決浮動父容器高度塌陷問題。
清除浮動方法：
1、最后添加一個空div，對它清理。缺點是增加了一個無意義的標簽。 加div。
2、使用clear:both(left,right)。
3、使用BFC清除浮動
/*方法1*/ ie可用
.clearfix{
*zoom:1;
}
/*方法2*/ 常用方法，但是ie沒有after偽元素
.clearfix:after{
content:"";
display:table;
clear:both;
}
有幾種定位方式，分別是如何實現(xiàn)定位的，參考點是什么，使用場景是什么？
| 值 | 屬性 | 參考點 | 使用場景 |
|---|---|---|---|
| inherit | 規(guī)定應該從父元素繼承 position 屬性的值 | 原始位置 | 很少用 |
| static | 默認值,沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明） | 原始位置 | 很少用 |
| relative | 生成相對定位的元素 | 相對于元素本身正常位置進行定位。因此，left:20px 會向元素的 left 位置添加20px | 當元素需要做少量調(diào)整時 |
| absolute | 生成絕對定位的元素 | 相對于static定位以外的第一個祖先元素（offset parent）進行定位。 | 當需要做頁面垂直水平居中時 |
| fixed | 生成絕對定位的元素 | 相對于瀏覽器窗口進行定位。 | 當需要在瀏覽器內(nèi)做欄目時 |
| sticky | CSS3新屬性，表現(xiàn)類似position:relative和position:fixed的合體 | 在目標區(qū)域在屏幕中可見時，它的行為就像position:relative; 而當頁面滾動超出目標區(qū)域時，它的表現(xiàn)就像position:fixed，它會固定在目標位置。 | 很少用，兼容性差 |
CSS有三種基本的定位機制：普通流，浮動，絕對定位(absolute,fixed)
1、普通流是默認定位方式，在普通流中元素框的位置由元素在html中的位置決定，這也是我們最常見的方式，其中position: static與position:relative屬于普通流的定位方式
2、浮動定位機制
3、絕對定位包括 absolute和 fixed
浮動元素：會對其他浮動元素產(chǎn)生影響，會對普通流元素的文本產(chǎn)生影響
絕對定位：不會
絕對定位寬度： 絕對定位寬度是收縮的，如果想撐滿父容器，可以設置 width: 100%
清除浮動： 絕對定位能形成 BFC 可用來清除浮動 可用來阻止外邊距合并
z-index 有什么作用? 如何使用?
定義： z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
注釋：元素可擁有負的 z-index 屬性值。
注釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！
說明：
該屬性設置一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù)，則離用戶更近，為負數(shù)則表示離用戶更遠。Z-index 僅能在定位元素（position:relative/absolute/fixed）上奏效。
position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別？
position:relative;只相對自己原本位置發(fā)生偏移，不影響其它普通流中元素的位置,類似浮動元素。
margin：除了讓元素自身發(fā)生偏移還影響其它普通流中的元素。
BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
BFC的全稱是 Block Format Content，塊級格式化上下文。通俗來講就是BFC是一個隔離的獨立容器，容器里面的子元素不會影響到外面的子元素，反之亦然。
如何生成BFC：
一個塊格式化上下文由以下之一創(chuàng)建：
- 根元素或其它包含它的元素
- 浮動元素 (元素的 float 不是 none)
- 絕對定位元素 (元素具有 position 為 absolute 或 fixed)
- 內(nèi)聯(lián)塊 (元素具有 display: inline-block)
- 表格單元格 (元素具有 display: table-cell，HTML表格單元格默認屬性)
- 表格標題 (元素具有 display: table-caption, HTML表格標題默認屬性)
- 具有overflow 且值不是 visible 的塊元素
- display: flow-root
- column-span: all 應當總是會創(chuàng)建一個新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一個多列容器中。
作用： BFC 特性
- BFC會阻止垂直外邊距（margin-top、margin-bottom）折疊
按照BFC的定義，只有同屬于一個BFC時，兩個元素才有可能發(fā)生垂直Margin的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有阻擋(例如邊框，非空內(nèi)容，padding等)就會發(fā)生margin重疊。
因此要解決margin重疊問題，只要讓它們不在同一個BFC就行了，但是對于兩個相鄰元素來說，意義不大，沒有必要給它們加個外殼，但是對于嵌套元素來說就很有必要了，只要把父元素設為BFC就可以了。這樣子元素的margin就不會和父元素的margin發(fā)生重疊 - BFC不會重疊浮動元素
- BFC可以包含浮動。demo
局限性：
使用BFC使用float的時候會使父容器長度縮短，而且還有個重要缺陷——父容器float解決了其塌陷問題，那么父容器的父容器怎么辦？overflow屬性會影響滾動條和絕對定位的元素；position會改變元素的定位方式，這是我們不希望的，display這幾種方式依然沒有解決低版本IE問題。。。
在什么場景下會出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
外邊距合并： 外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。
合并后的外邊距的高度不是 ”上面段落的下邊距“ 與 ”下面段落的上邊距“ 的 求和 ，而是兩者中的較大者。若都為負時，取絕對值大的。若出現(xiàn)一正一負的現(xiàn)象，則取兩者的和。（demo）
清除外邊距合并
- 消除邊距合并的方式：形成BFC。但這里要注意的是，在形成BFC的方式中（float的值不為none，display的值為inline-block、table-cell、table-caption）這兩個能直接起效果。但（overflow的值為auto或者hidden）這個必須外面還要包裹一層父元素。
- 父子元素之間的外邊據(jù)合并
消除邊距合并的方式一：給父元素加邊框
消除邊距合并的方式二：給父元素加padding
例子
