1 . 浮動(dòng)的特征逛腿，影響#####
浮動(dòng)模型也是一種可視化格式模型单默，浮動(dòng)的框可以左右移動(dòng)（根據(jù)float屬性值而定），直到它的外邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的框的邊緣引颈。浮動(dòng)元素不在文檔的普通流中蝙场，文檔的普通流中的元素表現(xiàn)的就像浮動(dòng)元素不存在一樣.
如果包含塊兒太窄無法容納水平排列的三個(gè)浮動(dòng)元素,那么其它浮動(dòng)塊兒向下移動(dòng),直到有足夠的空間,如果浮動(dòng)元素的高度不同,那么向下移動(dòng)的時(shí)候可能被卡住
浮動(dòng)會(huì)讓元素脫離普通流, 如果浮動(dòng)的元素后面有一個(gè)文檔流中元素,那么這個(gè)元素的框會(huì)表現(xiàn)的像浮動(dòng)元素不存在,但是框的文本內(nèi)容會(huì)受到浮動(dòng)元素的影響,會(huì)移動(dòng)以留出空間.用術(shù)語說就是浮動(dòng)元素旁邊的行框被縮短,從而給浮動(dòng)元素流出空間,因而行框圍繞浮動(dòng)框售滤，形成文字環(huán)繞的視覺效果逼泣。
對(duì)父元素的影響 子元素都浮動(dòng)時(shí)舟舒，父元素高度為0秃励，高度塌陷吉捶。
對(duì)其他浮動(dòng)元素的影響 同一個(gè)方向的浮動(dòng)元素：當(dāng)一個(gè)浮動(dòng)元素在浮動(dòng)過程中碰到同一個(gè)方向的浮動(dòng)元素時(shí)呐舔，它會(huì)緊跟在它們后面；反方向的浮動(dòng)元素：互不影響食呻，位于同一條水平線上仅胞，當(dāng)空間不夠時(shí)會(huì)被擠下
對(duì)普通元素的影響 對(duì)于兄弟節(jié)點(diǎn)為塊元素來說位于浮動(dòng)元素后面的元素可能會(huì)被浮動(dòng)元素覆蓋
對(duì)文字的影響 文字會(huì)被擠出去剑辫，形成文字環(huán)繞浮動(dòng)元素的效果。
對(duì)子元素的影響 當(dāng)一個(gè)元素浮動(dòng)時(shí)椎眯，在沒有清除浮動(dòng)的情況下编整，它無法撐開其父元素旦万，但它可以讓自己的浮動(dòng)子元素?fù)伍_它自身，并且在沒有定義具體寬度情況下，使自身的寬度從100%變?yōu)樽赃m應(yīng)（浮動(dòng)元素display:block）淆两。其高度和寬度均為浮動(dòng)元素高度和非浮動(dòng)元素高度之間的最大值拂酣。
2 . 清除浮動(dòng)是指#####
清除浮動(dòng)指清除掉元素float屬性，解決浮動(dòng)父容器高度塌陷問題剑勾，及 對(duì)其他元素造成的副作用。
清除浮動(dòng)的方法
（1）如果我們想讓父元素在視覺上包圍浮動(dòng)元素可以像下面這樣處理,在最后添加一個(gè)空div暂刘，對(duì)它清理谣拣。缺點(diǎn)是增加了一個(gè)無意義的標(biāo)簽
（2）BFC清理浮動(dòng)
兩種方案
雖然我們得出了一種瀏覽器兼容的靠譜解決方案族展，但這并不代表我們一定得用這種方式，很多時(shí)候我們的父容器本身需要position：absolute等形成了BFC的時(shí)候我們可以直接利用這些屬性了贵涵，大家要掌握原理独悴，活學(xué)活用锣尉。總而言之清理浮動(dòng)兩種方式
利用 clear屬性坟奥，清除浮動(dòng)
? .clearfix{
? ? ? *zoom:1;
? }
? .clearfix:after{
? ? ? content:"";
? ? ? display:block;
? ? ? clear:left;
? }
使父容器形成BFC
3 . 有幾種定位方式爱谁，分別是如何實(shí)現(xiàn)定位的孝偎，參考點(diǎn)是什么，使用場(chǎng)景是什么寺旺？#####
有一下幾種定位方式势决。
值 屬性 使用場(chǎng)景
inherit 規(guī)定應(yīng)該從父元素繼承 position 屬性的值
static 默認(rèn)值,沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）
relative 生成相對(duì)定位的元素陈莽，相對(duì)于元素本身正常位置進(jìn)行定位,因此走搁，left:20px 會(huì)向元素的 left 位置添加20px
absolute 生成絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)祖先元素（offset parent）進(jìn)行定位,元素的位置通過 left, top, right 以及 bottom 屬性進(jìn)行規(guī)定
定位機(jī)制
CSS有三種基本的定位機(jī)制：普通流忌栅，浮動(dòng)狂秘，絕對(duì)定位(absolute,fixed)
普通流是默認(rèn)定位方式躯肌，在普通流中元素框的位置由元素在html中的位置決定，這也是我們最常見的方式钱烟，其中position: static與position:relative屬于普通流的定位方式
浮動(dòng)定位定位機(jī)制
絕對(duì)定位包括 absolute和 fixed
absolute 和 fixed
相對(duì)定位可以看作特殊的普通流定位拴袭，元素位置是相對(duì)于它在普通流中位置發(fā)生變化曙博，而絕對(duì)定位使元素的位置與文檔流無關(guān)，也不占據(jù)文檔流空間般哼，普通流中的元素布局就像絕對(duì)定位元素不存在一樣
絕對(duì)定位的元素的位置是相對(duì)于距離最近的非static祖先元素位置決定的蒸眠。如果元素沒有已定位的祖先元素杆融，那么他的位置就相對(duì)于初始包含塊html來定位demo。
因?yàn)榻^對(duì)定位與文檔流無關(guān)蒋腮，所以絕對(duì)定位的元素可以覆蓋頁面上的其他元素徽惋，可以通過z-index屬性控制疊放順序座韵，z-index越高誉碴，元素位置越靠上。
fixed固定定位代咸，固定定位是絕對(duì)定位的一種呐芥，固定定位的元素也不包含在普通文檔流中奋岁，差異是固定元素的包含塊兒是視口（viewport）。
絕對(duì)定位寬度
絕對(duì)定位寬度是收縮的滨攻，如果想撐滿父容器光绕，可以設(shè)置 width: 100%畜份。
絕對(duì)定位和 BFC
絕對(duì)定位能形成 BFC 可用來清除浮動(dòng) 可用來阻止外邊距合并
絕對(duì)定位垂直水平居中
4 . z-index 有什么作用? 如何使用?#####
定義和用法
z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面停蕉。
注釋：元素可擁有負(fù)的 z-index 屬性值谷徙。
注釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）驯绎！
說明
該屬性設(shè)置一個(gè)定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區(qū)的軸屈尼。如果為正數(shù)脾歧，則離用戶更近演熟，為負(fù)數(shù)則表示離用戶更遠(yuǎn)司顿。
5 . position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別#####
position:relative和負(fù)margin都能是元素位置發(fā)生偏移大溜，但兩者的原理是完全不同的钦奋。
margin是外間距疙赠，position是定位，兩者毫無相似之處
position:relvation是相對(duì)于自身原來的位置偏移厌衔，但其他元素認(rèn)為它還在原來的位置限佩。
margin的兼容性更好祟同。負(fù)margin的偏移會(huì)對(duì)其他元素產(chǎn)生影響，如果一個(gè)元素用負(fù)margin的方式偏移泞坦，可能會(huì)使相鄰元素的布局發(fā)生改變砖顷。
6 . BFC 是什么？如何生成 BFC豌熄？BFC 有什么作用锣险？舉例說明#####
BFC的全稱是 Block Format Content览闰。
① BFC會(huì)阻止垂直外邊距（margin-top、margin-bottom）折疊崖咨。
按照BFC的定義击蹲，只有同屬于一個(gè)BFC時(shí)，兩個(gè)元素才有可能發(fā)生垂直Margin的重疊际邻，這個(gè)包括相鄰元素芍阎，嵌套元素谴咸，只要他們之間沒有阻擋(例如邊框，非空內(nèi)容血巍，padding等)就會(huì)發(fā)生margin重疊珊随。
因此要解決margin重疊問題，只要讓它們不在同一個(gè)BFC就行了鲫凶，但是對(duì)于兩個(gè)相鄰元素來說螟炫，意義不大艺晴，沒有必要給它們加個(gè)外殼，但是對(duì)于嵌套元素來說就很有必要了然评，只要把父元素設(shè)為BFC就可以了狈究。這樣子元素的margin就不會(huì)和父元素的margin發(fā)生重疊
②BFC不會(huì)重疊浮動(dòng)元素
③BFC可以包含浮動(dòng)
我們可以利用BFC的第三條特性來“清浮動(dòng)”，這里其實(shí)說清浮動(dòng)已經(jīng)不再合適贯莺，應(yīng)該說包含浮動(dòng)缕探。也就是說只要父容器形成BFC就可以还蹲，簡(jiǎn)單看看如何形成BFC
? float為 left|right
? overflow為 hidden|auto|scroll
? display為 table-cell|table-caption|inline-block
? position為 absolute|fixed
我們可以對(duì)父容器添加這些屬性來形成BFC達(dá)到“清浮動(dòng)”效果
<div style="border: solid 5px #0e0; width:300px;overflow:hidden;">
<div style="height: 100px; width: 100px; background-color: Red;? float:left;">? ? ? </div>
<div style="height: 100px; width: 100px; background-color: Green;? float:left;"> </div>
<div style="height: 100px; width: 100px; background-color: Yellow;? float:left;"> </div>
</div>
BFC清理浮動(dòng)局限性
使用BFC使用float的時(shí)候會(huì)使父容器長(zhǎng)度縮短耙考，而且還有個(gè)重要缺陷——父容器float解決了其塌陷問題倦始，那么父容器的父容器怎么辦山卦？overflow屬性會(huì)影響滾動(dòng)條和絕對(duì)定位的元素；position會(huì)改變?cè)氐亩ㄎ环绞矫锻耄@是我們不希望的铸本，display這幾種方式依然沒有解決低版本IE問題箱玷。
7 . 在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并锡足？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例#####
定義：外邊距合并指的是呀舔，當(dāng)兩個(gè)垂直外邊距相遇時(shí)媚赖，它們將形成一個(gè)外邊距珠插。
合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。
產(chǎn)生條件：外邊距和并一般發(fā)生在父元素與子元素為同種BFC磨隘，且父元素沒有border顾患，
當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)江解，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并。請(qǐng)看下圖：
當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開）鳖枕，它們的上和/或下外邊距也會(huì)發(fā)生合并。請(qǐng)看下圖：
阻止元素出現(xiàn)外邊距合并的方式
場(chǎng)景 方法
父子元素 給父元素設(shè)置一個(gè)padding值或者加上邊框逢艘，或者將父元素形成BFC蝠检。
相鄰元素 ① 給相鄰元素設(shè)置float或inline-block屬性。②給相鄰元素分別包裹一層父元素则奥，將這個(gè)父元素形成BFC。
只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框罚舱、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并绎谦。
代碼##
實(shí)現(xiàn)如下alert效果：http://js.jirengu.com/todufujiwu/1/edit?html,css,output
實(shí)現(xiàn)如下表單效果：http://js.jirengu.com/labacusedi/1/edit?html,css,output
實(shí)現(xiàn)如下模態(tài)框效果：http://js.jirengu.com/sobizoqowa/1/edit?html,css,output
實(shí)現(xiàn)如下導(dǎo)航欄效果：http://js.jirengu.com/keyudilagi/1/edit?html,css,output對(duì)
