浮動元素有什么特征悦陋？對父容器迁酸、其他浮動元素缴允、普通元素户魏、文字分別有什么影響?
浮動模型也是一種可視化格式模型拍顷，浮動的框可以左右移動（根據(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
例子
