1. 浮動元素有什么特征坑鱼？對父容器、其他浮動元素絮缅、普通元素姑躲、文字分別有什么影響?
- 浮動元素不在文檔的普通流中，它可以根據(jù)float屬性值而左右移動盟蚣，直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣才停止移動黍析。
- 對父容器：如果父容器內的元素均設置了浮動且沒有設置父容器的高度，那么他們脫離普通流無法撐起父容器的高度屎开，導致父元素的塌陷阐枣。
- 對其它浮動元素：同一父容器內的浮動元素按照設定的方向并排排列，當父元素的寬度不夠時奄抽，后面的元素會向下移動蔼两，直到有足夠的空間；如果浮動元素的高度不同逞度，那么有可能擋住移動的路徑额划。
- 對普通元素：無法辨別普通元素，有可能導致覆蓋其它普通元素档泽，占據(jù)其位置俊戳。
- 對文字：文字能夠識別浮動元素，會圍繞浮動元素馆匿。
2. 清除浮動指什么? 如何清除浮動? 兩種以上方法
因為沒有預先設置div高度抑胎，所以div高度由其包含的子元素高度決定。而浮動脫離文檔流渐北，所以子元素并不會被計算高度阿逃。此時的div中，相當于div中子元素高度為0，所以發(fā)生了父元素高度塌陷現(xiàn)象恃锉，而清除浮動就是指消除浮動元素對其父元素因浮動元素造成的高度塌陷的問題.
清理浮動一般有三種思路：
- 設置clear:both能清除浮動搀菩，并撐開父元素。(clear 屬性規(guī)定元素的哪一側不允許其他浮動元素破托。)
- 使父容器形成BFC肪跋。
- 父級div定義 偽類:after 和 zoom，原理類似上一種炼团。
3. 有幾種定位方式，分別是如何實現(xiàn)定位的疏尿，參考點是什么瘟芝，使用場景是什么？
4 種不同類型的定位褥琐，這會影響元素框生成的方式锌俱。
- static
元素框正常生成。塊級元素生成一個矩形框敌呈，作為文檔流的一部分贸宏，行內元素則會創(chuàng)建一個或多個行框，置于其父元素中磕洪。 - relative
元素框偏移某個距離吭练。元素仍保持其未定位前的形狀，它原本所占的空間仍保留析显。
參考點：自身在文檔流中的位置鲫咽。
使用場景：一般作為絕對定位的元素參考點，或者頁面圖片的小偏移谷异。 - absolute
元素框從文檔流完全刪除分尸，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊歹嘹。元素原先在正常文檔流中所占的空間會關閉箩绍，就好像元素原來不存在一樣。元素定位后生成一個塊級框尺上，而不論原來它在正常流中生成何種類型的框材蛛。
參考點：距離最近的非static祖先元素位置。如果元素沒有已定位的祖先元素怎抛，那么他的位置就相對于初始包含塊html來定位仰税。
使用場景：元素的水平垂直居中。 - fixed
元素框的表現(xiàn)類似于將 position 設置為 absolute抽诉，不過其包含塊是視窗本身陨簇。
參考點：參考瀏覽器窗口(視窗)的位置。使用場景：相對于瀏覽器窗口位置始終不變的顯示窗口，比如：固定邊欄和底欄
提示：相對定位實際上被看作普通流定位模型的一部分河绽，因為元素的位置相對于它在普通流中的位置己单。
4. z-index 有什么作用? 如何使用?
z-index 屬性指定一個元素的堆疊順序。
擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面耙饰。
z-index有三個屬性：
- auto 默認纹笼。堆疊順序與父元素相等。
- number設置元素的堆疊順序苟跪。
- inherit規(guī)定應該從父元素繼承 z-index 屬性的值廷痘。
5. position:relative和負margin都可以使元素位置發(fā)生偏移，那二者有什么區(qū)別件已？
position:relative笋额，元素顯示位置發(fā)生變化，但是元素在文檔流中的位置不變篷扩，不影響后面元素在文檔流中的布局兄猩。
負margin，元素的顯示位置和在文檔流中的位置均發(fā)生變化鉴未，會影響后面元素在文檔流中的位置枢冤。
6. BFC 是什么？如何生成 BFC铜秆？BFC 有什么作用淹真？舉例說明。
塊格式化上下文（block formatting context） 是頁面 CSS 視覺渲染(visual CSS rendering)這個過程中的一個概念连茧。它是決定塊盒子的布局及浮動元素相互影響的一個因素趟咆。具有對內部元素的包裹性及對外部元素的獨立性。
BFC有以下特性：
- 內部的Box會在垂直方向梅屉，從頂部開始一個接一個地放置值纱。
- Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生疊加坯汤。
- 每個元素的margin box的左邊虐唠， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)惰聂。即使存在浮動也是如此疆偿。
- BFC的區(qū)域不會與float box疊加。
- BFC就是頁面上的一個隔離的獨立容器搓幌，容器里面的子元素不會影響到外面的元素杆故，反之亦然。
- 計算BFC的高度時溉愁，浮動元素也參與計算处铛。
以下方式可以生成BFC：
- float 除了none以外的值
- overflow 除了visible 以外的值（hidden，auto，scroll ）
- display (table-cell撤蟆，table-caption奕塑，inline-block, flex, inline-flex)
- position值為（absolute，fixed）
- fieldset元素
由第二條特性家肯，我們可以在解決margin疊加問題時用到BFC龄砰。
三P每個p之間的距離為50px，發(fā)生了外邊距疊加讨衣。 要解決這個疊加問題即讓每個P之間是100px换棚，我們可以新建一個BFC，怎么建呢反镇？可以給p元素添加一個父元素固蚤，讓它觸發(fā)BFC。如下:
由第六條特性愿险，BFC可用于用于清除浮動颇蜡。
我們發(fā)現(xiàn)由于里面兩個子元素浮動的關系价说，兩個box已經脫離了父元素的包含塊辆亏，父元素高度已經塌陷，我們需要讓父元素包含兩個box子元素鳖目，這樣計算高度時扮叨，兩個浮動子元素就會參與，所以我們要閉合浮動领迈，觸發(fā)父元素的BFC彻磁。
7. 在什么場景下會出現(xiàn)外邊距合并？如何合并狸捅？如何不讓相鄰元素外邊距合并衷蜓？給個父子外邊距合并的范例。
外邊距合并指的是尘喝，兩個在普通文檔流中的“相鄰”元素外邊距相遇的時候發(fā)生合并的情況磁浇。這個所謂的“相鄰”可以是父子關系相鄰，兄弟關系相鄰朽褪，甚至如果一個元素內部沒有東西置吓，自身的上下邊距相遇時都會發(fā)生外邊距合并。
當兩個外邊距都是正數(shù)時缔赠，取兩者之中的較大者衍锚；當兩個外邊距都是負數(shù)時，取兩者之間絕對值較大者嗤堰；當兩個外邊距一正一負時戴质，取的是兩者的和。
如果不想讓相鄰元素外邊距合并，可以：
- 浮動元素置森、inline-block 元素斗埂、絕對定位元素的 margin 不會和垂直方向上其他元素的 margin 折疊（注意這里指的是上下相鄰的元素）
- 創(chuàng)建了塊級格式化上下文的元素，不和它的子元素發(fā)生 margin 折疊（注意這里指的是創(chuàng)建了BFC的元素和它的子元素不會發(fā)生折疊）BFC的因素是float（除了none）凫海、overflow（除了visible）呛凶、display（table-cell/table-caption/inline-block）、position（除了static/relative）
