問題1：浮動元素有什么特征充石？對父容器莫换、其他浮動元素、普通元素、文字分別有什么影響?
特征：
- 脫離文檔的普通流
- 不被其他塊級元素所感知拉岁，但可被塊級元素中的文本溃列、圖像等行內(nèi)元素所感知。
- 直到碰到父元素的包含框或子元素的包含框才停止
影響：
- 父容器感知不到浮動元素的存在膛薛，父容器的高度會塌陷
- 其他浮動元素碰到該浮動元素時，會停止浮動
-
普通元素感知不到浮動元素补鼻，繼續(xù)按文檔流排列哄啄，浮動元素覆蓋普通元素，類似下圖
浮動元素覆蓋普通元素 - 文字受到浮動元素的影響风范，移動以留出空間咨跌，圍繞浮動元素排列（行框縮短）
問題2：清除浮動指什么? 如何清除浮動? 兩種以上方法
清除浮動:在非IE瀏覽器（如Firefox）下，當容器的高度為auto硼婿，且容器的內(nèi)容中有浮動（float為left或right）的元素锌半，在這種情況下，容器的高度不能自動伸長以適應(yīng)內(nèi)容的高度寇漫，使得內(nèi)容溢出到容器外面而影響（甚至破壞）布局的現(xiàn)象刊殉。這個現(xiàn)象叫浮動溢出，為了防止這個現(xiàn)象的出現(xiàn)而進行的CSS處理州胳，就叫CSS清除浮動记焊。
方法：
- 在父元素最后添加一個空的div標簽，對它清理浮動栓撞。
- 對父元素設(shè)置
float:left/right或display：inline-block或者position:absolute/fixed或overflow：hidden
問題3：有幾種定位方式遍膜，分別是如何實現(xiàn)定位的，參考點是什么瓤湘，使用場景是什么瓢颅？
CSS 有三種基本的定位機制：普通流、浮動和絕對定位弛说。
- 普通流是默認的定位方式挽懦，在普通流中元素框的位置由元素在html中的位置決定，元素position屬性為static或繼承來的static時就會按照普通流定位剃浇，這是我們常見方式巾兆。
- 浮動，
float:left虎囚、float:right兩個常用屬性角塑，參考點為其父元素。 -
position:absolute生成絕對定位元素淘讥，絕對定位元素的位置相對于最近的已定位父元素圃伶，如果元素沒有已定位的父元素，那么它的位置相對于最初的包含塊。絕對定位的元素框從文檔流完全刪除窒朋，因此不占據(jù)空間.
position定位幾種方式 -
position:static該關(guān)鍵字指定元素使用正常的布局行為搀罢，即元素在文檔流中當前的布局位置。此時 top, right, bottom, left 和 z-index 屬性無效侥猩。 -
position:relative該關(guān)鍵字下榔至，元素先放置在未添加定位時的位置，再在不改變頁面布局的前提下調(diào)整元素位置欺劳。不脫離文檔流唧取，相對于自身原本位置定位。
常作用于父元素中划提，給絕對定位的子元素當定位參考 -
position:absolute脫離文檔流枫弟，通過指定元素相對于最近的非 static 定位祖先元素的偏移，來確定元素位置鹏往，偏移是參考其第一個定位父元素淡诗。 -
position:fixed不為元素預(yù)留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置伊履。元素的位置在屏幕滾動時不會改變韩容，偏移是參考瀏覽器窗口。 -
position:sticky盒位置根據(jù)正常流計算(這稱為正常流動中的位置)湾碎，然后相對于該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位宙攻。
問題4：z-index 有什么作用? 如何使用
z-index 屬性指定了一個元素及其子元素的 z-order。 當元素之間重疊的時候介褥，z-order 決定哪一個元素覆蓋在其余元素的上方顯示座掘。 通常來說 z-index 較大的元素會覆蓋較小的一個。
對于一個已經(jīng)定位的元素（即position屬性值是非static的元素）柔滔，z-index 屬性指定：
元素在當前堆疊上下文中的堆疊層級溢陪。
元素是否創(chuàng)建一個新的本地堆疊上下文。
z-index屬性只對定位元素有效
問題5：position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative是在自身的文檔流中讓自己顯示上發(fā)生偏移睛廊，文檔流中其他元素不會因為它的偏移而產(chǎn)生位置上的變化形真；負margin是讓元素的外邊框產(chǎn)生空隙從而發(fā)生偏移，此偏移會影響到元素后面的元素的位置超全。
問題6：BFC 是什么咆霜？如何生成 BFC？BFC 有什么作用嘶朱？舉例說明
1.BFC（Block Format Content）:BFC的全稱是Block Format Content——塊級格式化上下文：浮動蛾坯、絕對定位的元素(absolute、fixed定位)疏遏、塊容器(display屬性為inline-block,table-cells,table-captions)脉课、以及帶有overflow屬性(該屬性值不為visible)的display為block的塊級元素會建立新的塊級格式化上下文——元素們處于同一個塊級格式化上下文時救军，會遵守相同的規(guī)則/格式(例如垂直排列的兩個元素的margin會重疊)，但是處于不同的塊級格式化上下文時倘零，元素的排列展示遵守的規(guī)則/格式是不同的(處于不同BFC的垂直排列的兩個元素的margin是不會重疊的)
2.對父元素設(shè)：
- float:left/right
- display：inline-block
- position:absolute/fixed
- overflow：hidden
3.見下面三個例子
阻止垂直外邊距折疊
在p的父元素div上設(shè)置bfc唱遭，可以把它的背景顏色給顯示出來。
父子外邊距合并
包含浮動
設(shè)置父元素為bfc呈驶，高度恢復(fù)拷泽。
父元素高度塌陷
不會重疊浮動元素
浮動元素不重疊
問題7：在什么場景下會出現(xiàn)外邊距合并？如何合并袖瞻？如何不讓相鄰元素外邊距合并跌穗？給個父子外邊距合并的范例
- 處在同一個BFC的兩個且同處于普通流（非float和絕對定位）中的垂直相鄰元素
- 空元素
-
父子元素的外邊距合并
空元素合并
上圖中，去除border虏辫，p元素間距為100px，空元素的上下margin值合并锈拨。
- 阻止相鄰元素外邊距合并：使其中一元素生成bfc砌庄，display：inline-block
- 父子外邊距合并范例，見問題6中的3-1奕枢。
