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

1. 特征：

• 脫離正常文檔流，沿其容器的左側或右側放置，外邊緣碰到包含框或另一浮動元素的邊緣時會停下，文本和內聯元素將環繞它。
• float的計算值不為none。
• float意味著使用塊布局，所以某些情況下可以修改display的計算值，如給inline元素或inline-block設置float屬性，其display屬性就被隱性設置為block。
• 提升層次半級。

2. 影響：

• 對父容器：元素浮動后脫離正常文檔流，導致無法撐開父元素，造成父元素高度塌陷，除非給父元素也設置浮動或overflow屬性。
• 對其他浮動元素：浮動元素會緊貼同一方向上其他浮動元素排列，父元素寬度不夠的情況下會換行；反方向的浮動元素位于同一水平線上分別浮動、互不影響，但空間不夠時也會被擠下，被迫換行。
• 對普通元素：浮動元素雖和絕對定位元素有所差別，但同樣是脫離了正常文檔流，普通元素察覺不到其存在，會占用它原本的空間。
• 對文字：文字環繞浮動元素。

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

1. 清除浮動：元素浮動之前在標準流中縱向排列，浮動之后可以理解為橫向排列，所以清除浮動可以理解為打破橫向排列。

2. 如何清除：

• clear:both|left|right：分別表示元素被向下移動用于清除之前的所有／左／右浮動，適用于浮動和非浮動元素。
  舉個例子：
  比如頁面中只有兩個元素div1和div2，都是左浮動，父元素寬度足夠的情況下，div2會跟隨在div1后面。

但我們希望div2能夠排列在div1下面，就像div1沒有浮動而div2左浮動一樣，這時就要用到清除浮動，我們應在div2中設置"clear: left;"來指定div2左邊不允許出現浮動元素，這樣div2就被迫下移一行。

結論：clear規則只影響使用清除的元素本身，不能影響其他元素。

• overflow: hidden/auto;：不存在結構化和語義化問題，代碼量少，但內容增多時可能會導致內容隱藏，無法顯示需要溢出的內容。

• 浮動元素的父元素也設置浮動：下面的BFC一題中有舉例。

• 浮動元素的父元素設置display:table;：改變了盒模型屬性所以可能會造成一系列問題。

• 使用::after偽元素：結構和語義化完全正確、代碼量居中，但復用方式造成代碼量增加。
  注意：使用偽元素時一定要有content屬性，使用偽元素清除浮動，除了要有clear屬性外，還要記住，偽類元素默認display:inline-block;把值設為block更為穩妥！！！

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

三種定位方式：普通流、position定位、浮動。默認普通流。

• 普通流定位：
  塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直margin計算出來（margin合并）。
  由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內框。
  行內框在一行中水平布置。可以使用水平padding、border和margin調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。
• position定位：值：static|relative|absolute|fixed；
  static默認沒有定位；
  relative相對于自身正常位置左上角定位，定義元素框偏移某個距離，這個距離可以為負值。在使用相對定位時，無論是否進行移動，元素仍然占據原來的空間，因此移動元素會導致它覆蓋其它框。相對定位一般用于需要絕對定位的子元素的父元素中。
  absolute絕對定位，相對于static定位以外最近的已定位的祖先元素，如果沒有已定位的祖先元素，那么它的位置相對于最初的包含塊。如果設置了absolute但沒有設置值，那么使用了absolute的元素在頁面中的位置不會改變，但已經脫離了文檔流，與普通流已不在一個index-z層面上，因此不占據空間，其他元素表現得就好像該元素不存在一樣，元素定位后生成一個塊級框，而不論原來它在正常流中是何種類型的框。比如需要一個元素水平垂直居中就會用到absolute。
  fixed相對于瀏覽器窗口固定定位，元素的margin角點相對于整個窗口定位，可以把fixed看作是absolute的特殊情況。定位之后的元素A在顯示頁面上可能會覆蓋原本在此位置上的普通流元素B，A有多大就覆蓋多達面積。比如有些塊框需要固定在頁面上方就可以用fixed。
• float浮動定位：值：none|left|right；
  值不為none的情況下，浮動定位與絕對定位一樣會脫離正常文檔流，沿其容器的左側或右側放置，外邊緣碰到包含框或另一浮動元素的邊緣時會停下，普通元素察覺不到浮動元素存在會占用它原本的空間，文本和內聯元素將環繞它。比如需要做一個有按鈕的導航欄就可以用到浮動。

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

1. 作用：
   z-index屬性設置元素的堆疊順序。該屬性設置一個定位元素沿z軸的位置，z軸定義為垂直延伸到顯示區的軸。
2. 使用：
   z-index的值默認為auto，即堆疊順序繼承自父元素，不建立層疊上下文，值為0則建立層疊上下文，也可設置值為number，number值可以為負數。如果為正數，則離用戶更近，為負數則表示離用戶更遠，值越大越靠近用戶，當元素的層疊水平一致、層疊順序相同時，在DOM流處于后面的元素會覆蓋前面的元素。
   注意：z-index只能在值不為static的定位元素上奏效（例如 position:absolute;），且值只能在兄弟元素間進行比較。

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

• relative是相對定位，還在正常文檔流中，無論元素是否進行移動它都仍占據原來的空間，也就是說其他的元素的位置不會發生改變。移動元素可能會覆蓋其他的框，因為它的z-index層級發生了改變，可理解為只會重繪，不會回流。
• 負margin會影響文檔中其他元素的位置，造成頁面的回流與重繪。

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

1. BFC——block formatting context：塊格式化上下文，是Web頁面的可視化CSS渲染的一部分，是塊盒子的布局發生、浮動、互相交互的區域。通俗理解，首先BFC是一個獨立的布局環境，我們可以理解為一個箱子（實際上是看不見摸不著的），箱子里面物品的擺放是不受外界的影響的，反之也如此。

2. 如何生成：一個塊格式化上下文由以下之一創建：

• 根元素或其它包含它的元素
• 浮動(元素的 float不是 none)
• 絕對定位的元素(元素的position為 absolute或 fixed)
• 內聯塊 inline-blocks (元素具有display: inline-block)
• 表格單元格 (元素具有display: table-cell，HTML表格單元格默認屬性)
• 表格標題 (元素具有 [display: table-caption, HTML表格標題默認屬性)
• 塊元素具有overflow ，且值不是 visible
• display:flow-root

3. 作用：

• 自適應兩欄布局：
  設置浮動使元素脫離正常文檔里，生成BFC，與normal狀態下的元素互不影響，由此形成自適應兩欄布局。

• 防止垂直方向上的margin合并：
  設置了絕對定位的p生成了一個BFC，與其他兩個p不屬于同一個BFC，不會發生margin合并。

• 清除浮動，防止內部塌陷
  子元素設置了浮動脫離了正常文檔流，那么其父元素也要設置浮動或者overflow屬性來生成BFC去包裹子元素，才不會造成高度塌陷。

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

1、 概念：
塊的頂部外邊距和底部外邊距有時被組合(折疊)為單個外邊距，其大小是組合到其中的最大外邊距，這種行為稱為外邊距塌陷(margin collapsing)，有的地方翻譯為外邊距合并。

2、 合并場景及如何合并——垂直方向上合并。

• 相鄰的兄弟元素（除非后一個兄弟元素的出現是為了清除浮動）：兄元素的下外邊距和弟元素的上外邊距挨到了一起就會發生外邊距合并，合并之后的外邊距不是兄-下外邊距與弟-上外邊距之和，而是兩者間較大的那個，可以理解為取并集。

• 塊級父元素與其第一／最后一個子元素：當塊級父元素中不存在上邊框、上內邊距、內聯元素、清除浮動這四條屬性時，此塊級父元素會與其第一個子元素發生上外邊距合并，此時父元素對外展現出來的上外邊距將直接變成這個父元素和其第一個子元素的margin-top較大者；類似的，若塊級父元素的 margin-bottom 與它的最后一個子元素的margin-bottom之間沒有父元素的 border、padding、inline content、height、min-height、max-height分隔時，就會發生下外邊距合并現象。

• 空塊元素：如果存在一個空的塊級元素，其 border、padding、inline content、height、min-height 都不存在。那么此時它的上下邊距中間將沒有任何阻隔，此時它的上下外邊距將會合并，即自身合并。

元素按照以上規則發生合并，即使外邊距為0，這些規則也仍舊生效。因此，無論父元素的外邊距是否為0，第一個或者最后一個子元素的外邊距會被父元素的外邊距"截斷"，在負外邊距的情況下，合并后的外邊距為最大正外邊距與最小負外邊距之和。這就是一系列段落元素占用空間非常小的原因。

3、 外邊距合并規則：

• 兩個margin都是正值的時候，取兩者的最大值；
• 當 margin 都是負值的時候，取的是其中絕對值較大的，然后，從0位置，負向位移；
• 當有正有負的時候，先取出負 margin 中絕對值中最大的，然后，和正 margin 值中最大的 margin 相加。
• 所有響鈴的margin要一起參與運算，不能分步進行。

4、 阻止相鄰元素外邊距合并：BFC-塊格式化上下文——會阻止元素外邊距合并，如把元素設置為浮動和絕對定位那么它的外邊距不會發生合并。

5、 父子外邊距合并示例：

<style>
        .dad {
            background: red;
            width: 200px;
            height: 200px;
            margin: 20px;
        }
        .son {
            background: yellow;
            width: 100px;
            height: 100px;
            margin: 30px;
        }
</style>
<div class="dad">
    <div class="son"></div>
</div>

代碼

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

參考資料：

• mdn float
• CSS浮動與清除浮動
• CSS浮動、定位
• 清除浮動