浮動元素有什么特征？
- 浮動元素可以在頁面中移動，知道他的外邊碰到頁面邊緣或另一個浮動元素的外邊為止。
- 浮動元素并不在普通流中，普通流中的元素排列不會被浮動元素影響。
對父容器、其他浮動元素、普通元素、文字分別有什么影響?
對父容器影響：
-
父容器并不能感知浮動元素的存在，因此普通流并不會受浮動元素的影響，并且當父元素沒有其他普通元素只有浮動元素時，父元素將不會被撐開
對父容器的影響 對其他浮動元素:
浮動元素之間彼此能感知到
當有多個浮動元素時會排成一排并左對齊
-
在容器中浮動元素一排的空間不夠時，多出的浮動元素下移到下一排左對齊排列，如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”
對其他浮動元素 對普通元素：
-
普通元素無法感知到浮動元素的存在
對普通元素 對文字：
-
如果父容器內文字足夠多，又有一個向左浮動的圖像，那文字就會圍繞這個圖像浮動，意思就是文字能感知到浮動元素的存在
對文字
清除浮動指什么?
- 當容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）布局的現象。這個現象叫浮動溢出，為了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動
如何清除浮動?
- 父級div定義height
- 原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
- 優點：簡單、代碼少、容易掌握
- 缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題
- 建議：不推薦使用，只建議高度固定的布局時使用
- 結尾處加空div標簽 clear:both
- 原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
- 優點：簡單、代碼少、瀏覽器支持好、不容易出現怪問題
- 缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好
- 建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法
- 父級div定義 偽類:after 和 zoom
- 原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
- 優點：瀏覽器支持好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
- 缺點：代碼多、不少初學者不理解原理，要兩句代碼結合使用才能讓主流瀏覽器都支持
- 建議：推薦使用，建議定義公共類，以減少CSS代碼
- 父級div定義 overflow:hidden
- 原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
- 優點：簡單、代碼少、瀏覽器支持好
- 缺點：不能和position配合使用，因為超出的尺寸的會被隱藏
- 建議：只推薦沒有使用position或對overflow:hidden理解較深者使用
- 父級div定義 overflow:auto
- 原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區域的高度
- 優點：簡單、代碼少、瀏覽器支持好
- 缺點：內部寬高超過父級div時，會出現滾動條。
- 建議：不推薦使用，如果你需要出現滾動條或者確保你的代碼不會出現滾動條就使用吧
其他的只做了解的清除浮動的方法：傳送門
有幾種定位方式，分別是如何實現定位的，參考點是什么，使用場景是什么？
- static 普通流
- 當沒有為一個元素(例如div)指定定位方式時，默認為static，也就是按照文檔的流式(flow)定位，將元素放到一個合適的地方。所以在不同的分辨率下，采用流式定位能很好的自適合，取得相對較好的布局效果。
- 參考點為當前正常文檔流
- relative 相對定位
- 在static的基礎上，如果想讓一個元素在他本來的位置做一些調整(位移)，可以將該元素定位設置為relative，同時指定相對位移(利用top,bottom,left,right)，相對定位的元素仍然在文檔流中，仍然占據著他本來占據的位置空間——雖然他現在已經不在本來的位置了
- 參考點為元素本身
- absolute 絕對定位
- 如果你想在一個文檔(Document)中將一個元素放至指定位置，你可以使用absolute來定位，將該元素的position設置為absolute，同時使用top,bottom,left,right來定位。
- 如果沒有父元素，參考點為body
- 絕對定位會使元素從文檔流中被刪除，結果就是該元素原本占據的空間被其它元素所填充
z-index 有什么作用? 如何使用?
- z-index用于控制BFC中元素的堆疊順序，z-index數值越大元素位置越靠上
position:relative和負margin都可以使元素位置發生偏移?二者有什么區別
- position:relative，元素在移動的時候，其在普通流上占據的位置并沒有改變，在該元素后面的元素的位置不會因為元素的移動而移動。
- 負margin，元素在移動的時候，在普通流上的位置發生改變，該元素后面的元素的位置也會相應改變。
BFC 是什么？
- BFC（Block Fomatting Context） 塊級格式化上下文，浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內容創建新的BFC（塊級格式上下文）。
如何生成 BFC？
- 根元素
- float屬性不為none
- position為absolute或fixed
- display為inline-block, table-cell, table-caption, flex, inline-flex
- overflow不為visible
BFC 有什么作用？
- 內部的Box會在垂直方向，一個接一個地放置。
- Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊
- 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)
*BFC的區域不會與float box重疊 - BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此
- 計算BFC的高度時，浮動元素也參與計算
在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
- 兩個在普通文檔流中相鄰的元素外邊距相遇的時候發生合并。這個相鄰可以是父子關系相鄰，兄弟關系相鄰，或者一個元素內部沒有東西，自身的上下邊距相遇時都會發生外邊距合并
- 兩個外邊距都是正數，取兩者之中的較大者；兩個外邊距都是負數，取兩者之間絕對值較大者；當兩個外邊距一正一負時，取兩者的和
- 若不想讓相鄰元素外邊距合并可將元素生成為BFC
-
父子外邊距合并舉例：
父子外邊距合并
