浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?
- 浮動元素脫離了正常的文檔流，使普通文檔流的元素?zé)o法識別浮動元素，文檔的普通流中的元素表現(xiàn)的就像浮動元素不存在一樣。
- 普通文檔流中的行內(nèi)框（如文本）能夠感知到浮動元素的存在，能夠?qū)崿F(xiàn)簡單的文字環(huán)繞效果，這也是浮動出現(xiàn)的本質(zhì)。
- 浮動元素直到碰到它的包含框或另一個(gè)浮動框的邊緣。
- 浮動元素具有BFC特性，如浮動元素間不會發(fā)生外邊距重疊。
- 清理浮動后，該元素的邊框與浮動元素的外邊距相鄰，即外邊距可能在浮動框內(nèi)。
- 浮動元素具有包裹性，在沒有設(shè)置width的情況下，寬度由內(nèi)容撐開。
- 即使是inline元素，浮動后也能顯示的設(shè)置寬高。
影響： - 因?yàn)槠洳辉倨胀ㄎ臋n流中， 能造成父元素“高度塌陷”。
- 其他浮動元素會"察覺"到浮動元素的存在按照從左到右的"正常文檔流"排列。
- 普通元素會表現(xiàn)的像浮動元素不存在一樣，不過行內(nèi)框（如文本）能感知到。
- 行內(nèi)框（如文本）會環(huán)繞浮動元素，實(shí)現(xiàn)文字環(huán)繞效果。
清除浮動指什么? 如何清除浮動? 兩種以上方法
- 清楚浮動指的是解決浮動所帶來的父容器高度塌陷，行內(nèi)元素環(huán)繞浮動元素，浮動元素覆蓋普通元素等問題。
- 第一種方法，為父容器設(shè)置overflow:hidden.
- 第二種方法，給父容器增加一個(gè)空元素。
有幾種定位方式，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么，使用場景是什么？
z-index 有什么作用? 如何使用?
- z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
- z-index屬性適用于定位元素（position屬性值為 relative 或 absolute 或 fixed的對象），用來確定定位元素在垂直于顯示屏方向（稱為Z軸）上的層疊順序，也就是說如果元素是沒有定位的，對其設(shè)置的z-index會是無的。
- 如果兩個(gè)元素都沒有定位發(fā)生位置重合現(xiàn)象或者兩個(gè)都已定位元素且z-index相同發(fā)生位置重合現(xiàn)象，那么按文檔流順序，后面的覆蓋前面的。
- 如果兩個(gè)元素都沒有設(shè)置z-index，使用默認(rèn)值，一個(gè)定位一個(gè)沒有定位，那么定位元素覆蓋未定位元素.
- 如果父元素z-index有效，那么子元素?zé)o論是否設(shè)置z-index都和父元素一致，會在父元素上方。
- 如果父元素z-index失效（未定位或者使用默認(rèn)值），那么定位子元素的z-index設(shè)置生效。
- 如果兄弟元素的z-index生效，那么其子元素覆蓋關(guān)系由父元素決定。
position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
- 負(fù)margin會使元素在文檔流中的位置發(fā)生偏移，它會放棄偏移之前占據(jù)的空間，緊挨其后的元素會填充這部分空間；
- 相對定位后元素位置發(fā)生偏移，它仍會堅(jiān)守原來占據(jù)的空間，不會讓文檔流的其他元素流入。
BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
- BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干。
1、內(nèi)部的Box會在垂直方向，一個(gè)接一個(gè)地放置。
2、Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會發(fā)生重疊
3、每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
4、BFC的區(qū)域不會與float box重疊。
5、BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
6、計(jì)算BFC的高度時(shí)，浮動元素也參與計(jì)算. - 哪些元素會生成BFC?
1、根元素
2、float屬性不為none
3、position為absolute或fixed
4、display為inline-block, table-cell, table-caption, flex, inline-flex
5、overflow不為visible - BFC的應(yīng)用。
- 自適應(yīng)兩欄布局。
- 清楚內(nèi)部浮動
- 防止垂直外邊距合并。
在什么場景下會出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例
- 相鄰元素：當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。
- 父子元素：當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（如沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發(fā)生合并。
- 空塊元素：如果存在一個(gè)空的塊級元素，其 border、padding、inline content、height、min-height 都不存在，那么此時(shí)它的上下邊距中間將沒有任何阻隔，此時(shí)它的上下外邊距將會合并。
如何合并
- 兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，合并取它們兩者之間較大的值。
- 兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，合并取兩者絕對值的較大值。
- 兩個(gè)外邊距一正一負(fù)時(shí)，合并取兩者相加的和。
如何不讓相鄰元素外邊距合并？
- 兩個(gè)元素外邊距會不會合并主要看它們外邊距之間有沒有分界線存在。要想讓兩個(gè)元素的外邊距不合并，就要讓它們之間有道分界線，這個(gè)分界線可以是border，padding或者是BFC形成的獨(dú)立空間。
- 設(shè)置border或padding使外邊框隔離。
- 設(shè)置父元素overflow屬性取值為除visiable外的其他值，構(gòu)建BFC區(qū)域進(jìn)行隔離，該元素和它的子元素之間的margin不會被折疊。
- 設(shè)置浮動元素(float:left/right)，不與任何元素的外邊距合并。
- 設(shè)置絕對定位元素（position:absolute），不與任何元素的外邊距合并。
- 設(shè)置display:inline-block的元素，不與任何元素的外邊距合并。
