• 浮動(dòng)元素有什么特征？

• 浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè) 浮動(dòng)框的邊框?yàn)橹埂?/li>
• 由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣
• 如果包含塊兒太窄無法容納水平排列的三個(gè)浮動(dòng)元素,那么其它浮動(dòng)塊兒向下移動(dòng),直到有足夠的空間,如果浮動(dòng)元素的高度不同,那么向下移動(dòng)的時(shí)候可能被卡住
• 創(chuàng)建浮動(dòng)框可以使文本(文字要足夠多才有視覺效果)圍繞圖像

• 對(duì)父容器、其他浮動(dòng)元素、普通元素、文字分別有什么影響?

對(duì)父容器:
如果給父容器中(div)的元素設(shè)置了浮動(dòng)，因?yàn)楦?dòng)元素脫離了文檔流，所以包圍圖片和文本的div不占據(jù)空間，會(huì)產(chǎn)生視覺上有縫隙，需要設(shè)置個(gè)空div來clear:both

Paste_Image.png

對(duì)其他浮動(dòng)元素:
浮動(dòng)元素之間能相互感知到彼此的存在，若有三個(gè)框都向左浮動(dòng)，那么框 1 向左浮動(dòng)直到碰到包含框，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框；如果包含框太窄，無法容納水平排列的三個(gè)浮動(dòng)元素，那么其它浮動(dòng)塊向下移動(dòng)，直到有足夠的空間；如果浮動(dòng)元素的高度不同，那么當(dāng)它們向下移動(dòng)時(shí)可能被其它浮動(dòng)元素“卡住”

Paste_Image.png

對(duì)普通元素：
普通元素?zé)o法感知到浮動(dòng)元素的存在
當(dāng)框 1 向左浮動(dòng)時(shí)，它脫離文檔流并且向左移動(dòng)，直到它的左邊緣碰到包含框的左邊緣。因?yàn)樗辉偬幱谖臋n流中，所以它不占據(jù)空間，實(shí)際上覆蓋住了框 2，使框 2 從視圖中消失，如下圖左所示：

Paste_Image.png

對(duì)文字：
如果父容器內(nèi)文字足夠多，又有一個(gè)向左浮動(dòng)的圖像，那文字就會(huì)圍繞這個(gè)圖像浮動(dòng)，意思就是文字能感知到浮動(dòng)元素的存在

Paste_Image.png

• 清除浮動(dòng)指什么?
  一方面指清除文字圍繞浮動(dòng)元素的情況，另一方面使浮動(dòng)元素在視覺上被父容器包圍
• 如何清除浮動(dòng)? 兩種以上方法

• 直接給被清理的元素添加上margin或者左margin，(假設(shè)浮動(dòng)元素位于左上角)，使其能在浮動(dòng)元素之下或者右側(cè)
• 讓未浮動(dòng)元素也浮動(dòng)，如一個(gè)左浮動(dòng)，一個(gè)右浮動(dòng)
  如文章開頭圖示

但是以上方法會(huì)在視覺上出現(xiàn)父容器未包圍浮動(dòng)元素的情景：

• 使用clear屬性(本質(zhì)也是給被清理元素加上外邊距):我們需要加一個(gè)空的元素div，并使用clear: both
• 不使用clear屬性，對(duì)容器div進(jìn)行浮動(dòng)，但這樣會(huì)使下一個(gè)元素受到影響。
  為了解決這個(gè)問題，有些人選擇對(duì)布局中的所有東西進(jìn)行浮動(dòng)，然后使用適當(dāng)?shù)挠幸饬x的元素（常常是站點(diǎn)的頁腳）對(duì)這些浮動(dòng)進(jìn)行清理。這有助于減少或消除不必要的標(biāo)記。

兼顧瀏覽器的通用方法：

Paste_Image.png

• 有幾種定位方式，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么，使用場(chǎng)景是什么？
  position:

static

• 元素框正常生成。塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。
• 正常文檔流
  relative
• 元素框偏移某個(gè)距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
• 元素相對(duì)于原來所處位置進(jìn)行相對(duì)移動(dòng)，
  absolute
• 元素框從文檔流完全刪除，并相對(duì)于其包含塊定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來它在正常流中生成何種類型的框。
• 元素相對(duì)于其包含塊進(jìn)行定位移動(dòng)(默認(rèn)值在content上，設(shè)置top:0，left:0則在邊框上)，若該元素外無定位屬性元素，則參考HTML的根元素進(jìn)行定位
  fixed
• 元素框的表現(xiàn)類似于將 position 設(shè)置為absolute，不過其包含塊是視窗本身。
• 與absolute類似，不過其參考點(diǎn)唯一確定為viewpoint

• z-index 有什么作用?
  定義：z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
  注釋：元素可擁有負(fù)的 z-index 屬性值。
  注釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！
  說明：
  該屬性設(shè)置一個(gè)定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù)，則離用戶更近，為負(fù)數(shù)則表示離用戶更遠(yuǎn)。

• z-index 如何使用?
  Z-index 可用于將在一個(gè)元素放置于另一元素之后。
  先設(shè)置position，然后設(shè)置z-index可能的值
  auto：默認(rèn)。堆疊順序與父元素相等
  number：設(shè)置元素的堆疊順序
  inherit：規(guī)定應(yīng)該從父元素繼承 z-index 屬性的值

• position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別

• BFC 是什么？舉例說明

• Block Formatting Context，是Web頁面中盒模型布局的CSS渲染模式
• 摘自W3C：浮動(dòng)，絕對(duì)定位元素，inline-blocks, table-cells, table-captions,和overflow的值不為visible的元素，（除了這個(gè)值已經(jīng)被傳到了視口的時(shí)候）將創(chuàng)建一個(gè)新的塊級(jí)格式化上下文。
• 一個(gè)BFC是一個(gè)HTML盒子至少滿足下列條件中的任何一個(gè)：
  float的值不為none
  position的值不為static或者relative
  display的值為 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一個(gè)
  overflow的值不為visible

• 如何生成 BFC？
  一個(gè)BFC可以被顯式的觸發(fā)。如果想要?jiǎng)?chuàng)建一個(gè)新的BFC，只需要給它添加上面提到的任何一個(gè)CSS樣式就可以了。
• BFC 有什么作用？

• BFC可以包含浮動(dòng)。可以把浮動(dòng)元素變?yōu)槌Ｒ?guī)元素，讓父元素包裹浮動(dòng)元素。當(dāng)我們碰到這種情況，一個(gè)容器里有浮動(dòng)元素，容器元素沒有高度，它的浮動(dòng)孩子將會(huì)脫離頁面的常規(guī)流，那我們可以使用一個(gè)BFC來解決，如下圖：

  
  
  Paste_Image.png

• 使用BFC來防止外邊距折疊
  首先，在同一BFC當(dāng)中，內(nèi)部的元素外邊距會(huì)發(fā)生折疊，不過可以通過修改其中某個(gè)元素使他成為一個(gè)BFC就可以消除折疊(當(dāng)然是當(dāng)你需要這個(gè)元素發(fā)生折疊的時(shí)候)，大概效果圖如下：

  
  
  Paste_Image.png
  
  

  第二個(gè)和第三個(gè)兄弟元素屬于不同的BFC時(shí)，他們將不會(huì)發(fā)生外邊距折疊

• 使用BFC來防止文字環(huán)繞
  下圖很好的解釋了當(dāng)一個(gè)元素浮動(dòng)時(shí)，文字為什么會(huì)環(huán)繞
  
  Paste_Image.png
  
  圖中HTML假定為：
  
  Paste_Image.png
  
  在上圖中的整個(gè)黑色區(qū)域?yàn)閜元素。正如我們所看到的，這個(gè)p元素并沒有移動(dòng)，但是它卻出現(xiàn)在浮動(dòng)元素的背面。p元素的line boxes（指的是文本行）進(jìn)行了移位。此處line boxes的水平收縮為浮動(dòng)元素提供了空間。隨著文字的增加，因?yàn)閘ine boxes不再需要移位,最終將會(huì)環(huán)繞在浮動(dòng)元素的下方。
  根據(jù)這些，我們給p元素創(chuàng)建一個(gè)新的BFC，那么他就不會(huì)緊挨這容器塊的左邊緣，比如添加一個(gè)overflow:hidden來實(shí)現(xiàn)
  這里有一個(gè)解答B(yǎng)FC較為詳盡的blog

• 在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例
  外邊距合并指的是，在同一BFC當(dāng)中，內(nèi)部的元素外邊距會(huì)發(fā)生折疊(當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距)，不過可以通過修改其中某個(gè)元素使他成為一個(gè)BFC就可以消除折疊。
  當(dāng)外邊距為正值時(shí)，合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。
  當(dāng)外邊距出現(xiàn)負(fù)值，合并時(shí)取他們和的絕對(duì)值，合并的情況無法消除。
  父子外邊距合并

Paste_Image.png

代碼1
代碼2
代碼3
代碼4