浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?
一個元素應沿其容器的左側或右側放置，允許文本和內聯元素環繞它。該元素從網頁的正常流動中移除，盡管仍然保持部分的流動性。 父容器下的子元素如果都出現浮動,會造成父元素容器高度塌陷的問題;但是浮動還是以父容器的內邊框為界,并且會出現邊框合并的現象。
對浮動元素：浮動的框可以左右移動(根據float值而定),直到他的外邊緣碰到包含框或另一個浮動元素的框邊緣。
對普通元素: 浮動會讓元素脫離普通流,如果浮動的元素后面有普通元素,name這個元素的框會表現的像浮動元素沒有存在一樣。
對文本影響: 普通元素會忽略浮動元素,但文本內容會移動,給浮動元素留出空間,會有文本行框圍繞浮動元素的現象-
清除浮動指什么? 如何清除浮動? 兩種以上方法
清除浮動指的是在非IE瀏覽器（如Firefox）下，當容器的高度為auto，且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）布局的現象。這個現象叫浮動溢出，為了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。
方法一： 在浮動元素后面加上一個類為clear的空元素，讓它的屬性為clear: both；
如圖
image.png
代碼鏈接http://js.jirengu.com/hawav/5/edit
優點：簡單，代碼少，瀏覽器兼容性好。
缺點：需要添加大量無語義的html元素，代碼不夠優雅，后期不容易維護。
方法二：給浮動元素的容器也添加上浮動屬性即可清除內部浮動，但是這樣會使其整體浮動，影響布局，不推薦使用 有幾種定位方式，分別是如何實現定位的，參考點是什么，使用場景是什么？
position: static;該關鍵字指定元素使用正常的布局行為，即元素在文檔常規流中當前的布局位置。此時 top, right, bottom, left 和 z-index 屬性無效。
position: relative;
該關鍵字下，元素先放置在未添加定位時的位置，再在不改變頁面布局的前提下調整元素位置（因此會在此元素未添加定位時所在位置留下空白）。position:relative 未定義對 table-*-group, table-row, table-column, table-cell, table-caption 元素應用的效果。
position: absolute;
不為元素預留空間，通過指定元素相對于最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設置外邊距（margins），且不會與其他邊距合并。
position: fixed;
不為元素預留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出現在的每頁的固定位置。fixed 屬性會創建新的層疊上下文。當元素祖先的 transform 屬性非 none 時，容器由視口改為該祖先。
position: sticky
盒位置根據正常流計算(這稱為正常流動中的位置)，然后相對于該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。在所有情況下（即便被定位元素為 table 時），該元素定位均不對后續元素造成影響。當元素 B 被粘性定位時，后續元素的位置仍按照 B 未定位時的位置來確定。position: sticky 對 table 元素的效果與 position: relative 相同。
- absolute偏移的參考點首先是父元素，然后檢查該父元素是否具有position屬性，若具有position屬性，則以該父元素為參考點進行偏移，若不具有則繼續往上一級找，直到body標簽為止。
relative偏移的參考點是自身位置，是拿偏移前的位置與偏移后的位置進行比較，比如top10px，表現出來的其實是向下移動10px。
fixed偏移的參考點是瀏覽器窗口。
- z-index 有什么作用? 如何使用?
z-index指定了一個元素及其子元素的 z-order。 當元素之間重疊的時候，z-order 決定哪一個元素覆蓋在其余元素的上方顯示。 通常來說 z-index 較大的元素會覆蓋較小的一個。
定義z-index屬性，值必須為整數或者是auto. - position:relative和負margin都可以使元素位置發生偏移?二者有什么區別
使用relative偏移只是看上去位置發生了改變，但實際文檔流的位置還是沒有變化，但是負margin使得文檔流位置發生了變化，從而影響了后續的元素的文檔位置。
如圖：image.png
鏈接： http://js.jirengu.com/zerir/1/edit?html,css,output
- BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
是 W3C CSS 2.1 規范中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。當涉及到可視化布局的時候，Block Formatting Context提供了一個環境，HTML元素在這個環境中按照一定規則進行布局。一個環境中的元素不會影響到其它環境中的布局。比如浮動元素會形成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。這里有點類似一個BFC就是一個獨立的行政單位的意思。也可以說BFC就是一個作用范圍。可以把它理解成是一個獨立的容器，并且這個容器的里box的布局，與這個容器外的毫不相干。
BFC的觸發條件：
根元素或其它包含它的元素
浮動元素 (元素的 float 不是 none)
絕對定位元素 (元素具有 position 為 absolute 或 fixed)
內聯塊 (元素具有 display: inline-block)
表格單元格 (元素具有 display: table-cell，HTML表格單元格默認屬性)
表格標題 (元素具有 display: table-caption, HTML表格標題默認屬性)
具有overflow 且值不是 visible 的塊元素，
display: flow-root
column-span: all 應當總是會創建一個新的格式化上下文，即便具有column-span: all 的元素并不被包裹在一個多列容器中。
BFC的作用：-
可以用來實現兩欄布局
如圖 鏈接http://js.jirengu.com/xufof/1/edit?html,css,output
image.png -
解決父元素高度塌陷
image.png
代碼鏈接 http://js.jirengu.com/yowuq/6/edit?html,css,output -
解決相鄰垂直窗口的margin合并
image.png
代碼鏈接http://js.jirengu.com/pibux/1/edit
- 在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
外邊距合并指的是，兩個在普通文檔流中的“相鄰”元素外邊距相遇的時候發生合并的情況。這個所謂的“相鄰”可以是父子關系相鄰，兄弟關系相鄰，甚至如果一個元素內部沒有東西，自身的上下邊距相遇時都會發生外邊距合并。
合并的結果為： 當兩個外邊距都是正數時，取兩者之中的較大者；當兩個外邊距都是負數時，取兩者之間絕對值較大者；當兩個外邊距一正一負時，取的是兩者的和。
相鄰的外邊距合并：
-
把元素浮動起來，就不會與其他元素的外邊距合并代碼
image.png -
把display 設置為inline-block 也不會合并
image.png -
父子關系的合并
image.png
http://js.jirengu.com/jubad/3/edit
代碼1 https://jsbin.com/cereso/4/edit?html,css,output
代碼2 https://jsbin.com/gijocor/2/edit?html,css,output
代碼3 https://jsbin.com/cejitof/edit?html,css,output
代碼4 http://js.jirengu.com/zacomokuvu/2/edit?html,css,output
