浮動(dòng)元素的特征，對(duì)于父容器、其他浮動(dòng)元素、普通元素和文字分別都有什么影響？

• 對(duì)于父容器
• 浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論這個(gè)元素本身是什么，即使讓一個(gè)鏈接元素浮動(dòng)，如果其本身是行內(nèi)元素，也會(huì)生成塊級(jí)框浮動(dòng)元素的左右邊界不能超過(guò)包含塊的邊界
• 一個(gè)浮動(dòng)元素的頂端不能比其父元素的內(nèi)頂端更高。
• 對(duì)于其它浮動(dòng)元素
• 浮動(dòng)元素的外邊距不會(huì)合并
• 一個(gè)浮動(dòng)元素的左（或右）邊界必須是原文檔中之前出現(xiàn)過(guò)的浮動(dòng)元素的右（或左）邊界，除非后出現(xiàn)的浮動(dòng)元素的頂端在先前出現(xiàn)的浮動(dòng)元素的底端。這樣有效的避免了浮動(dòng)元素之間的重疊
• 浮動(dòng)元素的頂端不能比之前所有的浮動(dòng)元素或塊級(jí)元素的頂端更高
• 對(duì)于普通元素和文字
• 浮動(dòng)元素脫離文檔的普通流，文檔中普通流的元素便顯的就像浮動(dòng)元素不存在一樣
• 浮動(dòng)元素會(huì)以某種方式從文檔流中刪除，不過(guò)依然會(huì)影響布局。
• 如果源文檔中一個(gè)浮動(dòng)元素之前出現(xiàn)一個(gè)元素，浮動(dòng)元素的頂端不能比包含該元素所生成框的任何行框的頂端更高
• 行內(nèi)框與一個(gè)元素重疊時(shí)，其邊框、背景和內(nèi)容都在該浮動(dòng)元素“之上”顯示
• 塊框與一個(gè)浮動(dòng)元素重疊時(shí)，其邊框和背景在該浮動(dòng)元素“之下”顯示，而內(nèi)容則在浮動(dòng)元素“之上”顯示

清除浮動(dòng)的方法

解決浮動(dòng)父容器高度塌陷問(wèn)題

父容器高度塌陷

• 在其父容器中最后添加一個(gè)空的div，并設(shè)置樣式clear：both。（缺點(diǎn)是添加了一個(gè)無(wú)意義的標(biāo)簽）
• 使父容器形成BFC清除浮動(dòng)

• 通用在其父容器上添加如下：

  
  
  圖片.png

幾種定位方式的實(shí)現(xiàn)方式，參考點(diǎn)及使用場(chǎng)景

定位機(jī)制有三種，分別是普通流（static、relative），浮動(dòng)，絕對(duì)定位（absolute、fixed）。

• inherit 規(guī)定從其父元素繼承position屬性的值
• static 默認(rèn)值，沒(méi)有定位，元素出現(xiàn)在正常流中
• absolute 生成絕對(duì)定位元素，相對(duì)于static定位以外的第一個(gè)祖先元素進(jìn)行定位，可設(shè)置上下左右屬性值。
• relative 生成相對(duì)定位的元素，相對(duì)于元素本身正常位置進(jìn)行定位，可設(shè)置上下左右屬性值。
• fixed 生成絕對(duì)定位的元素，相對(duì)于瀏覽器器窗口進(jìn)行定位，可設(shè)置上下左右屬性值。

z-index的作用及使用方法

改變?cè)叵嗷ジ采w的順序，應(yīng)用于定位元素，值越大覆蓋優(yōu)先級(jí)越大。

position：relative和負(fù)margin都可以使元素發(fā)生偏移？二者的區(qū)別

將元素定位設(shè)置為相對(duì)定位后，元素的偏移不會(huì)對(duì)其他元素造成影響，而使用margin進(jìn)行元素偏移時(shí)其他相鄰元素也會(huì)相應(yīng)發(fā)生偏移，這是我們所不希望的。

BFC是什么？如何生成BFC？BFC的作用？

BFC（block format content）是塊級(jí)格式上下文，存在IE低版本不兼容的問(wèn)題，生成BFC的條件有

• float為left|right
• overflow為 hidden|auto|scroll
• display為 table-cell|inline-block|table-caption
• position為 absolute|fixed
• 作用有
• BFC會(huì)阻止垂直外邊距的折疊
  只有同屬一個(gè)BFC時(shí)，兩個(gè)元素才有可能發(fā)生垂直Margin的重疊
• BFC不會(huì)重疊浮動(dòng)元素
• BFC可以包含浮動(dòng)（利用此條特性來(lái)“清除浮動(dòng)”，也就是說(shuō)對(duì)父容器添加這些屬性形成BFC）

在什么場(chǎng)景下出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？舉例父子外邊距合并

• 出現(xiàn)外邊距合并的情境
  • 兩個(gè)元素上下排列，上面的元素有margin-bottom，下面的元素有margin-top
  • 父元素有margin-top/bottom同時(shí)子元素也有
  • 空元素同時(shí)有margin-top/bottom其上下margin會(huì)合并
• 如何合并
• 相鄰元素間上下外邊距取margin值大的那個(gè)
• 父子元素外邊距合并會(huì)讓父元素對(duì)外展現(xiàn)出來(lái)的外邊距將直接變成這個(gè)父元素和其第一個(gè)子元素的margin-top的較大者。
• 當(dāng)元素為空元素時(shí)，元素的上下margin會(huì)合并，并且多個(gè)兄弟（父子）空元素的外邊距會(huì)合并成一個(gè)，最終展現(xiàn)出來(lái)的外邊距會(huì)是多個(gè)外邊距中較大的那個(gè)，如果當(dāng)中有負(fù)margin的存在時(shí)，合并后的外邊距將是最大正邊距加上最小負(fù)邊距
• 如何不讓相鄰元素外邊距合并
  設(shè)置浮動(dòng)；
  設(shè)置為display：inline-block；
  使其父元素各形成BFC；
• 舉例說(shuō)明父子外邊距合并

圖片.png

圖片.png