1.浮動(dòng)元素有什么特征粱哼？對(duì)父容器季二、其他浮動(dòng)元素、普通元素揭措、文字分別有什么影響?
- 特征：浮動(dòng)模型也是一種可視化格式模型胯舷，浮動(dòng)的框可以左右移動(dòng)（根據(jù)float屬性值而定），直到它的外邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的框的邊緣绊含。浮動(dòng)元素不在文檔的普通流中桑嘶，因此文檔普通流中的塊級(jí)元素感知不到浮動(dòng)元素的存在。
- 對(duì)父容器影響：浮動(dòng)元素脫離文檔流向左或者向右移動(dòng)躬充，直到邊框碰到父元素的邊緣逃顶。引起的父元素高度塌陷
- 對(duì)其他浮動(dòng)元素的影響：父容器足夠?qū)挘c其他浮動(dòng)元素同一水平方向依次排列充甚。父容器寬度在同一水平方向上不能同時(shí)容納全部浮動(dòng)元素時(shí)以政，超出父容器寬度的浮動(dòng)元素向下移動(dòng),直到有足夠的空間,如果水平排列三個(gè)以上高度不同浮動(dòng)元素，那么向下移動(dòng)的時(shí)候可能被卡住津坑。
- 對(duì)普通元素的影響：浮動(dòng)元素之前的普通元素不受影響妙蔗。浮動(dòng)元素之后的普通元素因感知不到浮動(dòng)元素的存在會(huì)被浮動(dòng)元素覆蓋。
對(duì)文字的影響：文字所在行框（或display：inline-block）因?yàn)楦?dòng)元素的擠壓而縮短疆瑰，從而圍繞浮動(dòng)元素排列眉反。
2.清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
子元素浮動(dòng)引起父元素高度塌陷，因?yàn)闆](méi)有預(yù)先設(shè)置div高度穆役，所以div高度由其包含的子元素高度決定寸五。而浮動(dòng)脫離文檔流，所以子元素并不會(huì)被計(jì)算高度耿币。此時(shí)的div中梳杏，相當(dāng)于div中子元素高度為0，所以發(fā)生了父元素高度塌陷現(xiàn)象。
清除浮動(dòng)指：消除浮動(dòng)元素對(duì)其父元素因浮動(dòng)元素造成的高度塌陷的問(wèn)題
清理浮動(dòng)方法：
方法一：使父元素形成新的BFC十性，可以使用overflow：hidden/auto/scroll
display:inline-block float:方位等等
方法二：使用偽元素清楚浮動(dòng),如
.clearfix{zoom:1;}
.clearfix:after{
content:"";
display:block;
visible:hidden;
clear:both;
}
然后在需要清除浮動(dòng)的元素進(jìn)行調(diào)用
3.有幾種定位方式叛溢，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么劲适，使用場(chǎng)景是什么楷掉？
4 種不同類型的定位，這會(huì)影響元素框生成的方式霞势。
static
元素框正常生成烹植。塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分愕贡，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框草雕，置于其父元素中。
relative
元素框偏移某個(gè)距離固以。元素仍保持其未定位前的形狀墩虹，它原本所占的空間仍保留。
參考點(diǎn)：自身在文檔流中的位置嘴纺。
使用場(chǎng)景：一般作為絕對(duì)定位的元素參考點(diǎn)败晴，或者頁(yè)面圖片的小偏移。
absolute
元素框從文檔流完全刪除栽渴，并相對(duì)于其包含塊定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊稳懒。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉闲擦，就好像元素原來(lái)不存在一樣。元素定位后生成一個(gè)塊級(jí)框场梆，而不論原來(lái)它在正常流中生成何種類型的框墅冷。
參考點(diǎn)：距離最近的非static祖先元素位置。如果元素沒(méi)有已定位的祖先元素或油，那么他的位置就相對(duì)于初始包含塊html來(lái)定位寞忿。
使用場(chǎng)景：元素的水平垂直居中。
fixed
元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute顶岸，不過(guò)其包含塊是視窗本身腔彰。
參考點(diǎn)：參考瀏覽器窗口(視窗)的位置。使用場(chǎng)景：相對(duì)于瀏覽器窗口位置始終不變的顯示窗口辖佣，比如：固定邊欄和底欄
提示：相對(duì)定位實(shí)際上被看作普通流定位模型的一部分霹抛，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置
4.z-index 有什么作用? 如何使用?
z-index 屬性設(shè)置元素在Z軸方向上的堆疊順序。數(shù)值越大卷谈，元素越靠前杯拐。可設(shè)置負(fù)的 z-index 屬性值。Z-index 僅能在定位元素（position:relative/absolute/fixed）上奏效端逼。
5.position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative朗兵，元素顯示位置發(fā)生變化，但是元素在文檔流中的位置不變顶滩，不影響后面元素在文檔流中的布局余掖。
負(fù)margin，元素的顯示位置和在文檔流中的位置均發(fā)生變化诲祸，會(huì)影響后面元素在文檔流中的位置浊吏。
6.BFC 是什么？如何生成 BFC救氯？BFC 有什么作用找田？舉例說(shuō)明
BFC是塊級(jí)格式上下文。其定義是：浮動(dòng)着憨、絕對(duì)定位（絕對(duì)定位墩衙、固定定位）元素、塊級(jí)容器（如inline-block甲抖、 table-cell漆改、table-caption）并不是塊級(jí)盒子，還包括那些overflow屬性值取值visible以外的塊級(jí)盒子准谚，會(huì)為它們的內(nèi)容物創(chuàng)建一個(gè)新的塊級(jí)格式化上下文挫剑。
對(duì)元素設(shè)置以下屬性就可以生成BFC：
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;
BFC的作用有：
- 解決margin重疊問(wèn)題。所謂margin重疊是指處于同一個(gè)BFC的相鄰元素柱衔、嵌套元素樊破，只要它們之間沒(méi)有阻擋（如：邊框、非空內(nèi)容唆铐、padding等）就會(huì)發(fā)生margin重疊哲戚。這是只要讓其中一個(gè)元素生成新的BFC就能解決margin重疊問(wèn)題。
- 清除浮動(dòng)艾岂。因?yàn)锽FC可以包含浮動(dòng)顺少，所以讓父容器生成新的BFC可以讓父容器在視覺(jué)上包圍了浮動(dòng)的子元素，因而清除了浮動(dòng)王浴。
7.在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并脆炎？如何合并？如何不讓相鄰元素外邊距合并叼耙？給個(gè)父子外邊距合并的范例
外邊距合并:兩個(gè)在普通文檔流中相鄰的元素外邊距相遇的時(shí)候發(fā)生合并腕窥。這個(gè)相鄰可以是父子關(guān)系相鄰，兄弟關(guān)系相鄰筛婉，或者一個(gè)元素內(nèi)部沒(méi)有東西簇爆，自身的上下邊距相遇時(shí)都會(huì)發(fā)生外邊距合并癞松。
合并的結(jié)果： 兩個(gè)外邊距都是正數(shù)，取兩者之中的較大者入蛆；兩個(gè)外邊距都是負(fù)數(shù)响蓉，取兩者之間絕對(duì)值較大者；當(dāng)兩個(gè)外邊距一正一負(fù)時(shí)哨毁，取兩者的和枫甲。
1、相鄰元素外邊距合并：兩個(gè)元素都設(shè)置外邊距時(shí)扼褪，外邊距不會(huì)相加想幻，而是選擇外邊距的最大值。
阻止外邊距合并
給元素加一個(gè)display:inline-block;(只針對(duì)當(dāng)前加的元素起效)
2话浇、嵌套元素的外邊距合并:父元素與子元素（在父元素沒(méi)有邊框脏毯，padding等的情況下，最上面的元素的上邊距和最下面的元素下邊距與父元素發(fā)生合并）
阻止方法：
父元素生成一個(gè)新的BFC, overflow, display等...
給父元素加上一個(gè)邊框或者padding等..
3幔崖、一個(gè)元素內(nèi)部沒(méi)有東西食店，自身的上下邊距相遇時(shí)都會(huì)發(fā)生外邊距合并。如果還有一個(gè)相鄰的元素赏寇，還會(huì)與它的margin-top發(fā)生合并吉嫩。
阻止方法：
給元素加一個(gè)display:inline-block;
