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)?
如果沒(méi)有預(yù)先設(shè)置父元素高度鄙煤，子元素浮動(dòng)（脫離標(biāo)準(zhǔn)文檔流)會(huì)引起父元素高度塌陷。因?yàn)榇蠖鄶?shù)時(shí)候茶袒，父元素不設(shè)置高度梯刚，其高度由子元素?fù)纹稹８?dòng)（脫離標(biāo)準(zhǔn)文檔流)后薪寓，浮動(dòng)元素不占據(jù)標(biāo)準(zhǔn)文檔流空間亡资，不能夠撐起父元素澜共，從而引起父元素高度塌陷。
清除浮動(dòng)指：消除浮動(dòng)元素對(duì)其父元素因浮動(dòng)元素造成的高度塌陷的問(wèn)題锥腻。
- 清除浮動(dòng)方法1：給浮動(dòng)的元素的祖先元素加高度嗦董。只要浮動(dòng)在一個(gè)有高度的盒子中，那么這個(gè)浮動(dòng)就不會(huì)影響后面的浮動(dòng)元素瘦黑。所以就是清除浮動(dòng)帶來(lái)的影響了京革。
- 清除浮動(dòng)方法2：clear:both。clear就是清除幸斥，both指的是左浮動(dòng)匹摇、右浮動(dòng)都要清除。意思就是：清除別人對(duì)我的影響睡毒。這種方法有一個(gè)非常大的来惧、致命的問(wèn)題冗栗，margin失效了演顾。
- 清除浮動(dòng)方法3：使父元素形成新的BFC，可以使用overflow：hidden/auto等等隅居。
3. 有幾種定位方式钠至，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么胎源，使用場(chǎng)景是什么棉钧？
- inherit 規(guī)定應(yīng)該從父元素繼承 position 屬性的值
- static默認(rèn)值,沒(méi)有定位，元素出現(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)行定位,元素的位置通過(guò) left, top, right以及 bottom 屬性進(jìn)行規(guī)定
- fixed生成絕對(duì)定位的元素万栅，相對(duì)于瀏覽器窗口進(jìn)行定位佑钾。元素的位置通過(guò) left, top, right 以及 bottom 屬性進(jìn)行規(guī)定
- stickyCSS3新屬性，表現(xiàn)類似position:relative和position:fixed的合體烦粒，在目標(biāo)區(qū)域在屏幕中可見(jiàn)時(shí)休溶，它的行為就像position:relative; 而當(dāng)頁(yè)面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像position:fixed扰她，它會(huì)固定在目標(biāo)位置
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的作用有：
（1）解決margin重疊問(wèn)題谆膳。所謂margin重疊是指處于同一個(gè)BFC的相鄰元素、嵌套元素撮躁，只要它們之間沒(méi)有阻擋（如：邊框漱病、非空內(nèi)容、padding等）就會(huì)發(fā)生margin重疊把曼。這是只要讓其中一個(gè)元素生成新的BFC就能解決margin重疊問(wèn)題杨帽。
（2）清除浮動(dòng)。因?yàn)锽FC可以包含浮動(dòng)嗤军，所以讓父容器生成新的BFC可以讓父容器在視覺(jué)上包圍了浮動(dòng)的子元素注盈，因而清除了浮動(dòng)。
7. 在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并型雳？如何合并当凡？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例
外邊距合并指的是纠俭，當(dāng)兩個(gè)盒子處于同一個(gè)BFC中時(shí)沿量，它們的外邊距和重合。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者冤荆。浮動(dòng)之后朴则，相鄰的外邊距就不會(huì)合并。
