一概疆，浮動元素有什么特征盏混？對其他浮動元素、普通元素绩脆、文字分別有什么影響?
1.特性：
- 浮動元素會脫離正常的文檔流掰茶；
- 浮動的框可以向左或向右移動暇藏，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止；
- 浮動元素display的默認(rèn)值為"block"
2.影響：
- 2.1濒蒋、對其父元素的影響
對于其父元素來說，元素浮動之后，它脫離當(dāng)前正常的文檔流沪伙，所以它也無法撐開其父元素瓮顽，造成父元素的塌陷 - 2.2，對其兄弟元素（浮動）的影響
同一個方向的浮動元素：當(dāng)一個浮動元素在浮動過程中碰到同一個方向的浮動元素時围橡，它會緊跟在它們后面
反方向的浮動元素：互不影響暖混，位于同一條水平線上，當(dāng)空間不夠時會被擠下 - 2.3翁授、對其兄弟元素（非浮動）和其兄弟元素內(nèi)部文字的影響
如果兄弟元素為塊級元素拣播，該元素會忽視浮動元素的而占據(jù)它的位置，并且元素會處在浮動元素的下層（并且無法通過z-index屬性改變他們的層疊位置）收擦，但它的內(nèi)部文字和其他行內(nèi)元素都會環(huán)繞浮動元素贮配。
如果如果兄弟元素為內(nèi)聯(lián)元素，則元素會環(huán)繞浮動元素排列塞赂。
二泪勒，清除浮動指什么? 如何清除浮動? 兩種以上方法
- 清除浮動：解決浮動父容器高度塌陷問題
- 具體方法：
1.為浮動元素的父容器定義 overflow: hidden | auto | scroll，讓其父容器形成BFC宴猾，即可清除浮動影響圆存。
缺點：如果里面的內(nèi)容溢出父容器，會造成其他影響仇哆。
2.直接在父容器里面的最后位置添加一個空div沦辙，設(shè)置它的clear為both。
缺點：如無必要讹剔，無增實體怕轿，增加了一個無意義的標(biāo)簽。
3.使用after偽元素選擇權(quán)辟拷，在父容器最后面添加一個display為block | table的元素撞羽，設(shè)置它的clear為both（通時在父容器上添加*zoom:1，這樣可以兼容ie6~7;）是現(xiàn)在比較主流和通用的做法衫冻。
三诀紊，有幾種定位方式，分別是如何實現(xiàn)定位的隅俘，參考點是什么邻奠，使用場景是什么？
- relative：生成相對定位的元素为居，相對于元素本身正常位置進(jìn)行定位,因此碌宴，left:20px 會向元素的 left 位置添加20px；
使用場景：不需要脫離正常文檔流蒙畴，并進(jìn)行定位的元素贰镣。 - absolute：生成絕對定位的元素呜象，相對于static定位以外的第一個祖先元素（offset parent）進(jìn)行定位,元素的位置通過 left, top, right 以及 bottom 屬性進(jìn)行規(guī)定；
使用場景：需要脫離正常文檔流碑隆，并進(jìn)行定位的元素恭陡。 - fixed：生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位上煤。元素的位置通過 left, top, right 以及 bottom 屬性進(jìn)行規(guī)定休玩；
使用場景：始終出現(xiàn)在窗口某個位置的部分。 - inherit：規(guī)定應(yīng)該從父元素繼承 position 屬性的值劫狠；
- absolute：生成絕對定位的元素拴疤，相對于static定位以外的第一個祖先元素（offset parent）進(jìn)行定位,元素的位置通過 left, top, right 以及 bottom 屬性進(jìn)行規(guī)定；
四独泞，z-index 有什么作用? 如何使用?
- 作用：該屬性設(shè)置一個定位元素沿 z 軸的位置呐矾，z 軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù)阐肤，則離用戶更近凫佛，為負(fù)數(shù)則表示離用戶更遠(yuǎn)
- 使用：
...
.a{
background:red;
width:100px;
height:100px;
}
.b{
background:yellow;
width:100px;
height:100px;
position:absolute;
top:10px;
left:10px;
z-index:-1;
}
...
<div class="a">aaaa</div>
<div class="b">bbbb</div>
...
兩個同級的div，給b塊設(shè)置了絕對定位（z-index屬性目前只有在position:relative孕惜、position:absolute和position:fixed參與的情況下才有作用愧薛，表示層級），本應(yīng)覆蓋a塊衫画，但是又給b塊設(shè)置了z-index為-1毫炉，z-index為負(fù)數(shù)則表示離用戶更遠(yuǎn)；
五削罩，position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別瞄勾？
- position:relative：相對定位，偏移后元素未脫離文檔流且所占的原始空間仍會被保留弥激，不會對文檔流造成偏移影響进陡；
- 負(fù)margin：外邊距，當(dāng)外邊距為負(fù)值的時候微服，元素也會進(jìn)行偏移趾疚，不會脫離文檔流，但是會影響文檔流的位置以蕴，其他元素有可能也隨之偏移糙麦，；
六丛肮，BFC 是什么赡磅？如何生成 BFC？BFC 有什么作用宝与？舉例說明
- BFC：即塊級格式化上下文焚廊，它決定了元素如何對其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用徙硅。
- 如何讓一個容器形成BFC：
float為 left | right
overflow為 hidden | auto | scroll
display為 table-cell | table-caption | inline-block
position為 absolute | fixed
- BFC 有什么作用搞疗？
1.BFC會阻止垂直外邊距（margin-top须肆、margin-bottom）折疊
2.BFC不會重疊浮動元素
- BFC可以包含浮動
如可以使用BFC的特性來解決容器塌陷的問題：
.box{
border:4px solid;
width:200px;
overflow:hidden; /*觸發(fā)了BFC，解決了容器塌陷的問題*/
}
.a{
width:100px;
height:100px;
background:red;
float:left; /*a塊左浮動*/
}
.b{
width:100px;
height:100px;
background:blue;
float:right; /*b塊右浮動*/
}
...
<div class="box">
<div class="a">aaaa</div>
<div class="b">bbbb</div>
</div>
...
容器有個兩個浮動塊幢炸，這樣會導(dǎo)致容器塌陷，為容器添加overflow：hidden拒贱，觸發(fā)了BFC,解決了容器塌陷的問題宛徊；
六，在什么場景下會出現(xiàn)外邊距合并逻澳？如何合并闸天？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例斜做；
1.在什么場景下會出現(xiàn)外邊距合并苞氮？如何合并？給個父子外邊距合并的范例：
- 一個BFC中的兩個或多個毗鄰（普通流）塊元素垂直方向上的 margin瓤逼；
設(shè)置A塊的下margin為20px笼吟，B塊的上margin為20px，這個時候他們的外邊距合并了霸旗，A贷帮、B兩塊之間的間距為20px（如果A塊的下margin值和B塊的上margin值不一樣，中間的間距將會取兩個margin值中的最大值）诱告；
設(shè)置A塊的下margin為20px撵枢，設(shè)置B塊的上margin為-10px，這個時候他們的外邊距合并了蔬啡，A诲侮、B兩塊之間的垂直間距為10px，A箱蟆、B兩塊之間的間距距離是它們A塊下margin，B塊上margin值之和（如果這個和是負(fù)數(shù)的話空猜，A塊將被B塊覆蓋相應(yīng)尺寸）；
設(shè)置A塊的下margin為-40px搜贤，設(shè)置B塊的上margin為-10px仪芒，這個時候他們的外邊距合并了掂名，A塊被B塊覆蓋了40px饺蔑，A猾警、B兩塊之間的重合高度是A塊下margin发皿，B塊上margin值中的最小值雳窟；
- 塊級父元素與其第一個/最后一個子元素也會發(fā)生素垂直方向上margin合并封救。
將BOX塊的上margin設(shè)置為10px，A塊的上margin設(shè)置為30px券躁，BOX塊沒有內(nèi)邊距和邊框也拜，這個時候他們的外邊距合并了慢哈，BOX的實際上margin取決于BOX塊和A塊的上margin中的最大值卵贱。類似的，若塊級父元素的 margin-bottom與它的最后一個子元素的margin-bottom之間沒有父元素的border世分、padding臭埋、inline content斋泄、height镐牺、min-height睬涧、max-height分隔時畦浓，就會發(fā)生 下外邊距合并現(xiàn)象讶请。
2.如何不讓相鄰元素外邊距合并？
2.1.用非空內(nèi)容风响、padding状勤、border 或 clear 讓它們分隔開來持搜；
2.2.將它們其中一個設(shè)置為浮動元素葫盼、inline-block 元素或絕對定位元素的剪返。
