浮動元素有什么特征？

• 浮動元素可以在頁面中移動谆焊，知道他的外邊碰到頁面邊緣或另一個浮動元素的外邊為止惠桃。
• 浮動元素并不在普通流中，普通流中的元素排列不會被浮動元素影響。

對父容器辜王、其他浮動元素劈狐、普通元素、文字分別有什么影響?

• 對父容器影響：

• 父容器并不能感知浮動元素的存在呐馆，因此普通流并不會受浮動元素的影響肥缔，并且當(dāng)父元素沒有其他普通元素只有浮動元素時，父元素將不會被撐開

  
  
  對父容器的影響

• 對其他浮動元素:

• 浮動元素之間彼此能感知到

• 當(dāng)有多個浮動元素時會排成一排并左對齊

• 在容器中浮動元素一排的空間不夠時汹来，多出的浮動元素下移到下一排左對齊排列续膳，如果浮動元素的高度不同，那么當(dāng)它們向下移動時可能被其它浮動元素“卡住”

  
  
  對其他浮動元素

• 對普通元素：

• 普通元素?zé)o法感知到浮動元素的存在

  
  
  對普通元素

• 對文字：

• 如果父容器內(nèi)文字足夠多收班，又有一個向左浮動的圖像坟岔，那文字就會圍繞這個圖像浮動，意思就是文字能感知到浮動元素的存在

  
  
  對文字

清除浮動指什么?

• 當(dāng)容器的高度不能自動伸長以適應(yīng)內(nèi)容的高度闺阱，使得內(nèi)容溢出到容器外面而影響（甚至破壞）布局的現(xiàn)象炮车。這個現(xiàn)象叫浮動溢出，為了防止這個現(xiàn)象的出現(xiàn)而進行的CSS處理酣溃，就叫CSS清除浮動

如何清除浮動?

1. 父級div定義height

• 原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題纪隙。
• 優(yōu)點：簡單赊豌、代碼少、容易掌握
• 缺點：只適合高度固定的布局绵咱，要給出精確的高度碘饼，如果高度和父級div不一樣時，會產(chǎn)生問題
• 建議：不推薦使用悲伶，只建議高度固定的布局時使用

2. 結(jié)尾處加空div標(biāo)簽 clear:both

• 原理：添加一個空div艾恼，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
• 優(yōu)點：簡單麸锉、代碼少钠绍、瀏覽器支持好、不容易出現(xiàn)怪問題
• 缺點：不少初學(xué)者不理解原理花沉；如果頁面浮動布局多柳爽，就要增加很多空div，讓人感覺很不好
• 建議：不推薦使用碱屁，但此方法是以前主要使用的一種清除浮動方法

3. 父級div定義 偽類:after 和 zoom

• 原理：IE8以上和非IE瀏覽器才支持:after磷脯，原理和方法2有點類似，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動問題
• 優(yōu)點：瀏覽器支持好娩脾、不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用赵誓，如：騰迅，網(wǎng)易，新浪等等）
• 缺點：代碼多俩功、不少初學(xué)者不理解原理幻枉，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持
• 建議：推薦使用，建議定義公共類绑雄，以減少CSS代碼

4. 父級div定義 overflow:hidden

• 原理：必須定義width或zoom:1展辞，同時不能定義height，使用overflow:hidden時万牺，瀏覽器會自動檢查浮動區(qū)域的高度
• 優(yōu)點：簡單罗珍、代碼少、瀏覽器支持好
• 缺點：不能和position配合使用脚粟，因為超出的尺寸的會被隱藏
• 建議：只推薦沒有使用position或?qū)verflow:hidden理解較深者使用

5. 父級div定義 overflow:auto

• 原理：必須定義width或zoom:1覆旱，同時不能定義height，使用overflow:auto時核无，瀏覽器會自動檢查浮動區(qū)域的高度
• 優(yōu)點：簡單扣唱、代碼少、瀏覽器支持好
• 缺點：內(nèi)部寬高超過父級div時团南，會出現(xiàn)滾動條噪沙。
• 建議：不推薦使用，如果你需要出現(xiàn)滾動條或者確保你的代碼不會出現(xiàn)滾動條就使用吧

其他的只做了解的清除浮動的方法：傳送門

有幾種定位方式吐根，分別是如何實現(xiàn)定位的正歼，參考點是什么，使用場景是什么拷橘？

1. static 普通流

• 當(dāng)沒有為一個元素(例如div)指定定位方式時局义，默認(rèn)為static，也就是按照文檔的流式(flow)定位冗疮，將元素放到一個合適的地方萄唇。所以在不同的分辨率下，采用流式定位能很好的自適合术幔，取得相對較好的布局效果另萤。
• 參考點為當(dāng)前正常文檔流

2. relative 相對定位

• 在static的基礎(chǔ)上，如果想讓一個元素在他本來的位置做一些調(diào)整(位移)特愿，可以將該元素定位設(shè)置為relative仲墨，同時指定相對位移(利用top,bottom,left,right)，相對定位的元素仍然在文檔流中揍障，仍然占據(jù)著他本來占據(jù)的位置空間——雖然他現(xiàn)在已經(jīng)不在本來的位置了
• 參考點為元素本身

3. absolute 絕對定位

• 如果你想在一個文檔(Document)中將一個元素放至指定位置目养，你可以使用absolute來定位，將該元素的position設(shè)置為absolute毒嫡，同時使用top,bottom,left,right來定位癌蚁。
• 如果沒有父元素幻梯，參考點為body
• 絕對定位會使元素從文檔流中被刪除，結(jié)果就是該元素原本占據(jù)的空間被其它元素所填充

z-index 有什么作用? 如何使用?

• z-index用于控制BFC中元素的堆疊順序努释，z-index數(shù)值越大元素位置越靠上

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

• position:relative碘梢，元素在移動的時候，其在普通流上占據(jù)的位置并沒有改變伐蒂，在該元素后面的元素的位置不會因為元素的移動而移動煞躬。
• 負margin，元素在移動的時候逸邦，在普通流上的位置發(fā)生改變恩沛，該元素后面的元素的位置也會相應(yīng)改變。

BFC 是什么缕减？

• BFC（Block Fomatting Context） 塊級格式化上下文雷客，浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions）桥狡，以及overflow值不為“visiable”的塊級盒子搅裙，都會為他們的內(nèi)容創(chuàng)建新的BFC（塊級格式上下文）。

如何生成 BFC裹芝？

• 根元素
• float屬性不為none
• position為absolute或fixed
• display為inline-block, table-cell, table-caption, flex, inline-flex
• overflow不為visible

BFC 有什么作用部逮？

• 內(nèi)部的Box會在垂直方向，一個接一個地放置嫂易。
• Box垂直方向的距離由margin決定甥啄。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
• 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化炬搭，否則相反)
  *BFC的區(qū)域不會與float box重疊
• BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素穆桂。反之也如此
• 計算BFC的高度時宫盔，浮動元素也參與計算

在什么場景下會出現(xiàn)外邊距合并？如何合并享完？如何不讓相鄰元素外邊距合并灼芭？給個父子外邊距合并的范例

• 兩個在普通文檔流中相鄰的元素外邊距相遇的時候發(fā)生合并。這個相鄰可以是父子關(guān)系相鄰般又，兄弟關(guān)系相鄰彼绷，或者一個元素內(nèi)部沒有東西，自身的上下邊距相遇時都會發(fā)生外邊距合并
• 兩個外邊距都是正數(shù)茴迁，取兩者之中的較大者寄悯；兩個外邊距都是負數(shù)，取兩者之間絕對值較大者堕义；當(dāng)兩個外邊距一正一負時猜旬，取兩者的和
• 若不想讓相鄰元素外邊距合并可將元素生成為BFC

• 父子外邊距合并舉例：

  
  
  父子外邊距合并

練習(xí)

• 練習(xí)1
• 練習(xí)2
• 練習(xí)3
• 練習(xí)4