浮動元素的特征及影響

• 特征：
• 浮動模型也是一種可視化格式模型，浮動的框可以左右移動（根據float屬性值而定），直到它的外邊緣碰到包含框（父元素的border邊界）或者另一個浮動元素的框的邊緣。
• 浮動元素不在文檔的普通流中，文檔的普通流中的元素表現的會像浮動元素不存在一樣，會被覆蓋；但其中的文本會“感覺到”，被“擠”開。

覆蓋和擠開.png

• 若多個浮動元素寬度超過父容器邊框寬度時，超過的浮動元素會向下移動，下移的距離即上一個浮動元素的高度。若其上一個浮動元素的高度并不是前面那些浮動元素之中最高的，會出現“卡住”的現象。

2.png

• 若浮動元素的父元素（父容器）沒有設置高度，其同級元素又都是浮動元素，則父元素會發生高度塌陷。

高度塌陷.png

• 影響：
• 對父容器：若同級元素全為浮動元素，且父容器沒有設置高度，則父容器高度塌陷。
• 對其他元素： 無視浮動元素而位置重疊，進而被浮動元素覆蓋。
• 對文字：文字會“感覺到”浮動元素的存在，環繞浮動元素。
• 對其他浮動元素： 多個浮動元素依屬性按html順序浮動，若父容器寬度不夠，則多出的浮動元素下移（下移高度為前一個浮動元素高度）并繼續依屬性偏移。

清除浮動

• 在非IE瀏覽器（如Firefox）下，當容器的高度為auto，且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）布局的現象。這個現象叫浮動溢出，為了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。
• 如何清除浮動：
• 使用帶clear屬性的空元素。
  在浮動元素后使用一個空元素如<div class="clear"></div>，并在CSS中賦予.clear{clear:both;}屬性即可清理浮動。亦可使用<br class="clear" />或<hr class="clear" />來進行清理。

4.png

• 形成BFC（后文有詳解）。
  給含有浮動元素的父容器設置一些屬性，如：

而具有BFC屬性的父元素具有包含浮動元素的能力，即達到清除浮動的目的。
優點：不存在結構和語義化問題，代碼量極少。
缺點：根據使用屬性的不同可能會出現一些預期之外的其他情況，或多或少有副作用。

• 通用方案（使用偽元素選擇器）。
  給父容器加上一個class（eg: clearfix），然后CSS中使用如下代碼：

.clearfix:after {
  content: "\200B";
  display: block;
  clear: both;
  height: 0;
}
.clearfix {
  *zoom:1; 
}

偽元素法.png

優點：結構和語義化完全正確,代碼量居中。
缺點：復用方式不當會造成代碼量增加。
PS：

1. display:block 使生成的元素以塊級元素顯示,占滿剩余空間;
2. height:0 避免生成內容破壞原有布局的高度。
3. 通過 content:" "生成內容作為最后一個元素，在一些瀏覽器（firefox直到7.0）仍然會產生額外的空隙。Unicode字符里有一個“零寬度空格”，也就是\200B,這個字符本身是不可見的,因此我們可以使用這個字符。或，最后加個屬性（visibility:hidden）。
   參考：
4. https://segmentfault.com/a/1190000004865198
5. http://www.iyunlu.com/view/css-xhtml/55.html

定位方式

• 繼承父元素
  inherit
• 默認定位
  position: static：元素使用正常的布局行為，即其在文檔流中的當前布局位置（也就是說忽略top bottom left right Z-index聲明）
• 相對定位
  position: relative：參考點為元素本身正常位置，相對于此位置而進行定位，但其實際位置仍為原文檔流位置，只是看起來位置變了。使用場景即不想影響之后其他元素的位置。
• 絕對定位
• position: absolute：生成絕對定位的元素，相對于static定位以外的第一個祖先元素進行定位，位置通過top bottom left right進行規定。脫離文檔，不再占據文檔中的空間，其他元素會填充原本的空間。使用場景：當想忽略其位置而進行定位時。
• postion: fixed：固定定位，脫離文檔流，不再占據原空間。參考點為瀏覽器窗口。會隨著屏幕滾動條滾動而移動，故使用場景為隨屏幕而移動懸浮。
  下圖為相對定位relative和絕對定位absolute的區別
  
  定位區別.png
  
  鏈接為以上幾個定位的實際效果：定位效果

Z-Index

不引入Z-Index時的情況：（1-5依次從最底部到頂部）

1. 根元素的背景與邊框
2. 位于普通流中的后代塊元素按照它們在 HTML 中出現的順序層疊
3. 浮動塊元素
4. 常規流中的后代行內元素
5. 后代中的定位元素按照它們在 HTML 中出現的順序層疊

不引入時.png

注：圖中"no position"在左邊a（紅色）塊之上，d（橘色）之下，完全符合3 4 5的順序。

JSBin地址

引入Z-Index后

注：z-index只對指定了 [position]屬性為非static的元素有效。

引入Z-Index后.png

• 當沒有指定 z-index 的時候， 所有元素都在會被渲染在默認層(0層)。
• 當多個元素的 z-index 屬性相同的時候(在同一個層里面)，那么將按照沒有引入z-index時的規則進行布局。
• 該圖元素 div#5 的 z-index 無效， 因為他沒有被指定 position 屬性。

如何形成層疊上下文

文檔中的層疊上下文由滿足以下任意一個條件的元素形成：

• 根元素 (HTML),
• z-index 值不為 "auto"的 絕對/相對定位，
• 一個 z-index 值不為 "auto"的 flex 項目 (flex item)，即：父元素 display: flex|inline-flex，
• [opacity]屬性值小于 1 的元素。
• [transform]屬性值不為 "none"的元素。
• [mix-blend-mode]屬性值不為 "normal"的元素。
• [filter]值不為“none”的元素。
• perspective]值不為“none”的元素。
• [isolation]屬性被設置為 "isolate"的元素。
• position: fixed。
• 在 [will-change]中指定了任意 CSS 屬性，即便你沒有直接指定這些屬性的值。
• [-webkit-overflow-scrolling]屬性被設置 "touch"的元素。

總結

層疊順序.png

• 判斷準則：
• 誰大誰上：當具有明顯的層疊水平標示的時候，如識別的z-indx值，在同一個層疊上下文領域，層疊水平值大的那一個覆蓋小的那一個。
• 后來居上：當元素的層疊水平一致、層疊順序相同的時候，在DOM流中處于后面的元素會覆蓋前面的元素。
• z-index:0所在的<div>元素是層疊上下文元素,而z-index:auto所在的<div>元素是一個普通的元素。兩個前者做比較，依照后來居上；兩個后者做比較，依照誰大誰上。
• z-index只對指定了position為非static屬性的元素有效。
• z-index的數值大的元素會覆蓋到小的上面。
  參考：

1. http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
2. https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index
3. https://github.com/norvca/blog/issues/11

Position:relative和負Margin的區別

• Position:relative相對于元素本身所在位置進行定位，產生偏移。但事實上元素所處位置并沒有改變，只是看起來偏移了。后面的元素仍在原來的位置不動。
• 負Margin改變了元素原來所處的位置。后面的元素會相應作出移動。
  JSBin地址

relative和負margin.png

BFC

BFC（Block Format Context）：塊級格式化上下文，是Web頁面的可視化CSS渲染的一部分。它是塊盒子的布局發生，浮動互相交互的區域。

• 如何生成
  一個塊級格式化上下文由以下之一創建：
• 根元素或其它包含它的元素
• 浮動 (元素的 float 不是 none)
• 絕對定位的元素 (元素具有 position 為 absolute 或 fixed)
• 內聯塊 inline-blocks (元素具有 display: inline-block)
• 表格單元格 (元素具有 display: table-cell，HTML表格單元格默認屬性)
• 表格標題 (元素具有 display: table-caption, HTML表格標題默認屬性)
• 塊元素具有overflow ，且值不是 visible
• display: flow-root
  或者簡單來看，如表格：

元素擁有這些屬性后，便會建立塊級格式化上下文。

• 特性
• 阻止垂直外邊距合并。
  注：使用overflow時需要在元素外面加個父元素包裹，并給父元素設置overflow:hidden，其他方法不需要如此，直接給元素設置即可（例中便為此情況）。
  例：
  JSbin地址-阻止垂直外邊距合并

阻止外邊距合并.png

• BFC不會重疊浮動元素。
  例：
  JSbin地址-不重疊浮動元素

不重疊浮動元素.png

• BFC可以包含浮動。
  例：
  JSbin地址-包含浮動

包含浮動.png

外邊距合并

• 發生外邊距塌陷的三種基本情況:
• 相鄰的兄弟元素
• 塊級父元素與其第一個/最后一個子元素
  如果塊級父元素中，不存在上邊框、上padding、inline content、 清除浮動 這四條屬性（對于上邊框和上padding，也可以說，當上邊距及上padding寬度為0時），那么這個塊級元素和其第一個子元素的上邊距就可以說”挨到了一起“。此時這個塊級父元素和其第一個子元素就會發生 上外邊距合并 現象，換句話說，此時這個父元素對外展現出來的外邊距將直接變成這個父元素和其第一個子元素的margin-top的較大者。
• 空塊元素
  如果存在一個空的塊級元素，其 border、padding、inline content、height、min-height 都不存在。那么此時它的上下邊距中間將沒有任何阻隔，此時它的上下外邊距將會合并。
• 外邊距如何合并
• margin 都為正值，則取較大的 margin 值。
• margin 一正一負，則取相加后的數值。
• margin 都為負值，則取負值絕對值較大的 margin 值，此時 margin 為負值。
• 阻止相鄰元素外邊距合并
  使其中一個元素形成塊級格式化上下文即可，詳見上一章BFC。
• 父子外邊距合并范例
  JSBin-父子外邊距合并

父子外邊距合并.png

代碼

1. alert效果
2. 信息收集表
3. 模態框
4. 導航欄