1.浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?

浮動元素

浮動元素是設置float為非none值的元素，這時該元素會自動被設置成塊元素，可以設置寬度、高度以及邊距。浮動元素，顧名思義，使該元素浮動在其他元素之上，離開了原來的文檔流，直到浮動到父元素的左右邊距（上下邊距不受限制）或者左、右方遇到其他設置了float的元素。而其附近設置的浮動元素會跟其邊距相鄰，表面上跟內聯元素似的。而非浮動元素則相對復雜一些，分一下兩種情況：浮動元素后邊的元素若是非浮動行內元素且因為定位產生重疊時，行內元素邊框、背景和內容都在該浮動元素“之上”顯示，若是非浮動塊級元素跟在浮動元素后邊且在定位后產生重疊時，該塊級元素邊框和背景在該浮動元素“之下”顯示，只有內容在浮動元素不在非浮動元素的部分顯示。

• 浮動元素會脫離正常的文檔流，按照其外邊距指定的位置相對于它的上一個塊級元素（或父元素）顯示；

image.png

• 浮動元素后面的塊級元素的內容會向此浮動元素的外邊距靠齊，但是邊框和背景卻忽略浮動元素而向上一個（實例中為父元素）任意非浮動元素靠齊；

image.png

• 浮動元素后面的內聯元素會向此浮動元素的外邊距靠齊。

image.png

浮動元素的影響

• 對其父元素的影響：
  • 對于其父元素來說，元素浮動之后，它脫離當前正常的文檔流，所以它也無法撐開其父元素，造成父元素的塌陷
• 對其兄弟元素（非浮動）的影響
  • 如果兄弟元素為塊級元素，該元素會忽視浮動元素的而占據它的位置，并且元素會處在浮動元素的下層（并且無法通過z-index屬性改變他們的層疊位置），但它的內部文字和其他行內元素都會環繞浮動元素。
  • 如果如果兄弟元素為內聯元素，則元素會環繞浮動元素排列。
• 對其兄弟元素（浮動）的影響
  • 同一個方向的浮動元素：當一個浮動元素在浮動過程中碰到同一個方向的浮動元素時，它會緊跟在它們后面。
  • 反方向的浮動元素：互不影響，位于同一條水平線上，當空間不夠時會被擠下。
• 對子元素的影響
  • 當一個元素浮動時，在沒有清除浮動的情況下，它無法撐開其父元素，但它可以讓自己的浮動子元素撐開它自身，并且在沒有定義具體寬度情況下，使自身的寬度從100%變為自適應（浮動元素display:block）。其高度和寬度均為浮動元素高度、寬度和非浮動元素高度、寬度之間的最大值。

2.清除浮動指什么? 如何清除浮動? 兩種以上方法

浮動

浮動：一般是一個盒子里使用了CSS float浮動屬性，導致父級對象盒子不能被撐開

清除浮動的方法

• 1.給浮動的元素的祖先元素加上高度
  • 只要浮動在一個有高度的盒子中,那么這個浮動就不會影響后面的浮動元素.所以就是清除浮動帶來的影響了。
• 2.添加新的元素 、應用 clear：both

HTML：
<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="clear"></div>
</div>

CSS：
.clear{clear:both; height: 0; line-height: 0; font-size: 0}

（糾正： padding不會受影響）

• 3.父級div定義 overflow非 visible

 HTML：
<div class="outer over-flow"> //這里添加了一個class
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <!--<div class="clear"></div>-->
</div>

CSS：
.over-flow{
    overflow: auto; zoom: 1; //zoom: 1; 是在處理兼容性問題
}

• 4.:after 方法

.outer {
    zoom:1;
}    /*==for IE6/7 Maxthon2==*/
.outer :after {
    clear:both;
    content:'.';
    display:block;
    width: 0;height: 0;
    visibility:hidden;
}   /*==for FF/chrome/opera/IE8==*/

3.有幾種定位方式，分別是如何實現定位的，參考點是什么，使用場景是什么？

static(默認)

• 當你沒有為一個元素(例如div)指定定位方式時，默認為static，也就是按照文檔的流式(flow)定位，將元素放到一個合適的地方。所以在不同的分辨率下，采用流式定位能很好的自適合，取得相對較好的布局效果。
• 一般來說，我們不需要指明當前元素的定位方式是static——因為這是默認的定位方式。除非你想覆蓋從父元素繼承來的定位系統。

relative(相對定位)

• 在static的基礎上，如果我想讓一個元素在他本來的位置做一些調整(位移)，我們可以將該元素定位設置為relative，同時指定相對位移(利用top,bottom,left,right)。
• 有一點需要注意的是，相對定位的元素仍然在文檔流中，仍然占據著他本來占據的位置空間——雖然他現在已經不在本來的位置了。

absolute(絕對定位)

• 如果你想在一個文檔(Document)中將一個元素放至指定位置，你可以使用absolute來定位，將該元素的position設置為absolute，同時使用top,bottom,left,right來定位。
• 絕對定位會使元素從文檔流中被刪除，結果就是該元素原本占據的空間被其它元素所填充。

fixed(固定定位)

• 我們知道absolute定位的參照物是“上一個定位過的父元素(static不算)”，那么如果我想讓一個元素定位的參照物總是整個文檔(viewport)，怎么辦呢？答案是使用fixed定位，fixed定位的參照物總是當前的文檔。利用fixed定位，我們很容易讓一個div定位在瀏覽器文檔的左上，右上等方位。比如你想添加一個信息提示的div，并將該div固定在右上方，你可以使用以下css
  .element { position:fixed; top:2%; right:2%; }

float(浮動)

mix relative and absolute(混合相對定位和絕對定位)

• 如果對一個父元素設置relative，而對它的一個子元素設置absolute,則子元素的絕對定位的參照物為父元素。

reference

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

z-index

• z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。

z-index

• 層級關系的比較
  • 對于同級元素，默認(或position:static)情況下文檔流后面的元素會覆蓋前面的。
  • 對于同級元素，position不為static且z-index存在的情況下z-index大的元素會覆蓋z-index小的元素，即z-index越大優先級越高。
  • IE6/7下position不為static，且z-index不存在時z-index為0，除此之外的瀏覽器z-index為auto。
  • z-index為auto的元素不參與層級關系的比較，由向上遍歷至此且z-index不為auto的元素來參與比較。
• 順序規則
  • 如果不對節點設定 position 屬性，位于文檔流后面的節點會遮蓋前面的節點。
• 定位規則
  • 如果將 position 設為 static，位于文檔流后面的節點依然會遮蓋前面的節點浮動，所以 position:static 不會影響節點的遮蓋關系。
  • 如果將 position 設為 relative (相對定位)，absolute (絕對定位) 或者 fixed (固定定位)，這樣的節點會覆蓋沒有設置 position 屬性或者屬性值為 static 的節點，說明前者比后者的默認層級高。
  • 在沒有 z-index 屬性干擾的情況下, 根據這順序規則和定位規則, 我們可以做出更加復雜的結構. 這里我們對 A 和 B 都不設定 position, 但對 A 的子節點 A-1 設定 position:relative. 根據順序規則, B 會覆蓋 A, 又根據定位規則 A' 會覆蓋 B.

html
<div id="a">
       <div id="a-1" style="position:relative;">A-1</div>
</div>
<div id="b">B</div>

image.png

• 參與規則
  • 不用 position 屬性, 但為節點加上 z-index 屬性. 發現 z-index 對節點沒起作用. z-index 屬性僅在節點的 position 屬性為 relative, absolute 或者 fixed 時生效.
• 默認值規則
  • 如果所有節點都定義了 position:relative. z-index 為 0 的節點與沒有定義 z-index 在同一層級內沒有高低之分; 但 z-index 大于等于 1 的節點會遮蓋沒有定義 z-index 的節點; z-index 的值為負數的節點將被沒有定義 z-index 的節點覆蓋.
• 從父規則
  （1）如果 A, B 節點都定義了 position:relative, A 節點的 z-index 比 B 節點大, 那么 A 的子節點必定覆蓋在 B 的子節點前面.

<div id="a" style="position:relative;z-index:1;">
        <div id="a-1">A-1</div>
</div>
<div id="b" style="position:relative;z-index:0;">
        <div id="b-1">B-1</div>
</div>

image.png

（2）如果所有節點都定義了 position:relative, A 節點的 z-index 和 B 節點一樣大, 但因為順序規則, B 節點覆蓋在 A 節點前面. 就算 A 的子節點 z-index 值比 B 的子節點大, B 的子節點還是會覆蓋在 A 的子節點前面.

image.png

5.position:relative和負margin都可以使元素位置發生偏移?二者有什么區別

position:relative

• 在static的基礎上，如果我想讓一個元素在他本來的位置做一些調整(位移)，我們可以將該元素定位設置為relative，同時指定相對位移(利用top,bottom,left,right)。
• 相對定位的元素仍然在文檔流中，仍然占據著他本來占據的位置空間——雖然他現在已經不在本來的位置了。

負margin

• 使元素位置偏移，使元素在文檔流中的位置發生了改變，其后的元素受其影響。

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

BFC--塊級格式化上下文

BFC--塊級格式化上下文

7.在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例

BFC--塊級格式化上下文

BFC--塊級格式化上下文

margin重疊 ：

• margin參數：上右下左（4個值），其他：四個邊距兩兩對稱，比如3個值時，分別對應上右下， 左邊邊距和右邊值一樣。

• margin折疊結果：

  • 兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。
  • 兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。
  • 兩個外邊距一正一負時，折疊結果是兩者的相加的和。