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