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

浮動(dòng)元素按照橫向排列的方式進(jìn)行元素排列，根據(jù)float的值為left或right而左向排列或右向排列，直到其外邊緣碰到父元素的框或者另一個(gè)浮動(dòng)元素的框的邊緣才停止移動(dòng)。浮動(dòng)元素脫離了正常的文檔流，而相鄰的正常文檔流又無法感知其存在。

1. 浮動(dòng)元素對(duì) 父容器 的影響
   會(huì)導(dǎo)致父元素高度塌陷，即我們可以理解浮動(dòng)元素脫離了正常文檔流“浮”起來了，因而父元素抓不住其高度導(dǎo)致出現(xiàn)以下效果
   

   float1.png
   
   要解決這個(gè)問題就需要清除浮動(dòng)帶來的影響。

2. 對(duì) 其他浮動(dòng)元素 的影響
   概念中有說一句話“浮動(dòng)元素直到其外邊緣碰到父元素的框或者另一個(gè)浮動(dòng)元素的框的邊緣才停止移動(dòng)”，可以理解為浮動(dòng)元素對(duì)普通文檔流中的元素是沒有影響的，但是如果都是浮動(dòng)元素，那么父容器太窄會(huì)導(dǎo)致浮動(dòng)元素?zé)o法全部排開，那么浮動(dòng)元素碰到父元素的框會(huì)向下移，直到有足夠的空間；如果浮動(dòng)元素的高度不同，那么元素向下移的時(shí)候可能會(huì)卡住。
   

   float3.png

3. 對(duì) 普通元素 的影響
   如果浮動(dòng)元素后面有一個(gè)正常文檔流中的元素，那么正常的文檔流中元素是無法感知其存在的，但是正常文檔流中元素內(nèi)的文字是可以感知到浮動(dòng)元素的存在的，如果文字較多，那文字時(shí)會(huì)圍繞浮動(dòng)元素做一個(gè)排列的。如果想要文字正常排列，那我們需要對(duì)浮動(dòng)元素清除一下他們帶來的影響。（利用clear或BFC的方式）。
   

   float2.png

4. 對(duì) 文字 的影響
   如果一個(gè)父容器中的子元素都是浮動(dòng)元素，那么對(duì)文字沒有影響；如果父容器中子元素中有浮動(dòng)元素和正常文檔流元素，那么正常文檔流元素會(huì)圍繞浮動(dòng)元素排列
   

   float4.png

2、清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法

清除浮動(dòng)指的是清除子元素的浮動(dòng)對(duì)父元素造成的高度塌陷的問題。

怎樣清除浮動(dòng)？

• 可以在浮動(dòng)元素的最后面加一個(gè)空div來專門清除浮動(dòng)。但是這樣會(huì)造成代碼冗余，但是在一些特定場(chǎng)景下可用性比較好。
• 給父元素加一個(gè)overflow的屬性，其值為visible之外的值，即我們可以設(shè)置：overflow:hidden;或overflow:auto或overflow:scroll。
• 我們可以定義一個(gè)類，這可以成為我們平時(shí)使用的通用清理浮動(dòng)方法。

.clearfix{
      *zoom:1;
  }
  .clearfix:after{
      content:"";
      display:block;
      clear:left;
  }

或

.clearfix{
    *zoom:1;
  }
  .clearfix:after{
    content:"";
      display:table;
      clear:both;
  }

• 父容器有定位的相關(guān)屬性存在，比如：position為 absolute|fixed但是這個(gè)需要按照使用場(chǎng)景來使用。
  總結(jié)一下就是兩種方法：利用 clear屬性，清除浮動(dòng)和使父容器形成BFC。

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

定位方式一共六種：

1. 默認(rèn)值：static 當(dāng)我們文檔中沒有元素有定位屬性時(shí)，定位其實(shí)是默認(rèn)static這個(gè)值的，相當(dāng)于不定位，就是正常文檔流。
2. 相對(duì)定位：relative 設(shè)置了這個(gè)屬性的元素是根據(jù)自身位置來定位的，位置偏移之后其自身原本的位置還是有留存，不會(huì)因?yàn)樵乇阋酥笤瓉淼奈恢帽黄渌卣加?。相?duì)定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置。

3. 絕對(duì)定位：absolute 設(shè)置了這個(gè)屬性之后元素會(huì)尋找對(duì)于static定位以外的第一個(gè)祖先元素（offset parent）進(jìn)行定位根據(jù)其位置作為參考點(diǎn)進(jìn)行定位。如果元素沒有已定位的祖先元素，那么他的位置就相對(duì)于初始包含塊html來定位。常用在需要根據(jù)父元素位置來決定自身位置的情況下。

   
   
   position1.png
4. 固定定位：fixed 設(shè)置了這個(gè)屬性之后，元素會(huì)根據(jù)窗口的位置來定位，和其他定位都沒有關(guān)系，只是單純地根據(jù)窗口來定位。（常用在廣告條上）
5. sticky：CSS3新屬性，表現(xiàn)類似position:relative和position:fixed的合體，在目標(biāo)區(qū)域在屏幕中可見時(shí)，它的行為就像position:relative; 而當(dāng)頁面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像position:fixed，它會(huì)固定在目標(biāo)位置。但是其兼容性非常差，幾乎不能用。
6. inherit：規(guī)定應(yīng)該從父元素繼承 position 屬性的值。

實(shí)現(xiàn)方式

position:具體值;
top:n px;
left:n px;
right:n px;
bottom:n px;

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

z-index是用來設(shè)置堆疊順序的；z-index的數(shù)值越高，處于堆疊順序中層級(jí)越高，我們可以理解為距離屏幕越近，距離人眼越近。z-index設(shè)置在添加了position屬性的元素上，普通文檔流元素設(shè)置z-index值是無效的。

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

position:relative使元素發(fā)生偏移是相對(duì)于自身原本位置發(fā)生的偏移，對(duì)文檔流中的元素不產(chǎn)生任何影響。
負(fù)margin使元素發(fā)生的偏移會(huì)使得文檔流中位于負(fù)margin作用的元素后的其他元素隨著發(fā)生偏移。簡(jiǎn)單概括就是相對(duì)定位不會(huì)影響到其他元素，而負(fù)margin會(huì)影響到其他元素。

6、BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明

介紹一下BFC的定義：全稱block format content。翻譯成中文就是“塊狀格式化上下文”。定義為 Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
BFC有三個(gè)特性：

1. BFC會(huì)阻止垂直外邊距（margin-top、margin-bottom）折疊

- 按照BFC的定義，只有同屬于一個(gè)BFC時(shí)，兩個(gè)元素才有可能發(fā)生垂直Margin的重疊，這個(gè)包括相鄰元素，嵌套元素，只要他們之間沒有阻擋(例如邊框，非空內(nèi)容，padding等)就會(huì)發(fā)生margin重疊。
- 因此要解決margin重疊問題，只要讓它們不在同一個(gè)BFC就行了，但是對(duì)于兩個(gè)相鄰元素來說，意義不大，沒有必要給它們加個(gè)外殼，但是對(duì)于嵌套元素來說就很有必要了，只要把父元素設(shè)為BFC就可以了。這樣子元素的margin就不會(huì)和父元素的margin發(fā)生重疊

2. BFC不會(huì)重疊浮動(dòng)元素、
3. BFC可以包含浮動(dòng)

怎樣生成BFC？

• float為 left|right
• overflow為 hidden|auto|scroll
• display為 table-cell|table-caption|inline-block
• position為 absolute|fixed

BFC有什么作用？

• 我們可以對(duì)父容器添加這些屬性來形成BFC達(dá)到“清浮動(dòng)”效果
• 絕對(duì)定位形成的 BFC 可用來清除浮動(dòng)也可用來阻止外邊距合并
• 當(dāng)然，使用BFC去解決浮動(dòng)問題也有局限性：使用BFC使用float的時(shí)候會(huì)使父容器長(zhǎng)度縮短，而且還有個(gè)重要缺陷——父容器float解決了其塌陷問題，那么父容器的父容器怎么辦？overflow屬性會(huì)影響滾動(dòng)條和絕對(duì)定位的元素；position會(huì)改變?cè)氐亩ㄎ环绞?，這是我們不希望的，display這幾種方式依然沒有解決低版本IE問題。
• IE下：IE6、7內(nèi)有個(gè)hasLayout的概念，當(dāng)元素的hasLayout屬性值為true的時(shí)候會(huì)達(dá)到和BFC類似的效果，元素負(fù)責(zé)本身及其子元素的尺寸設(shè)置和定位。 下面使元素hasLayout為true：

1. position: absolute
2. float: left|right
3. display: inline-block
4. width: 除 “auto” 外的任意值
5. height: 除 “auto” 外的任意值
6. zoom: 除 “normal” 外的任意值
7. writing-mode: tb-rl
   在IE7中使用overflow: hidden|scroll|auto 也可以使hasLayout為true

舉例說明：http://js.jirengu.com/fimudokigu/3/edit

7、在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例

在同屬于一個(gè)BFC下，兩個(gè)元素可能會(huì)發(fā)生外邊距合并（可能是垂直的也可能是橫向的），包括嵌套元素和相鄰元素，只要元素之間沒有阻擋（邊框，padding,非空內(nèi)容等）就會(huì)發(fā)生margin重疊。margin合并是取margin大的那個(gè)來作為兩者之間或與其他元素之間的外邊距。
不讓相鄰元素外邊距合并的方法：

1. 給某個(gè)元素加padding或border;
2. 可以讓這兩個(gè)元素不在同一個(gè)BFC下即可解決這個(gè)問題。生成BFC的方法見問題6。
   范例：http://js.jirengu.com/yayiteguqi/3/edit
   
   margin合并.png
   
   另：添加一個(gè)負(fù)邊距合并的情況，這個(gè)和正的邊距合并其實(shí)是一個(gè)道理，也是取值比較大的那個(gè)作為邊距，忽略小的。
   
   負(fù)margin合并.png

負(fù)margin2.png