文檔流相關

文檔流

標準文檔流，元素默認會從左至右，上至下，塊級元素獨佔一行，行內元素共享一行

position

• static

預留空間，出如今正常文檔流，（忽略 top, bottom, left, right 或者 z-index 聲明）

• relative

預留空間，相對於以前的位置移動

• absoute

沒有預留空間，相對於非static的位置移動，若是沒有，就一路到根元素

• fixed

沒有預留空間，相對於屏幕視口的位置移動

• sticky（兼容很差）

相對於第一個有滾動的父級塊元素的位置移動，就是正常像relative，滾動時像fixed

z-index

層疊順序，整數越大，越被層疊在上面，父子關係的話，必定是父在上子在下，同節點若是不按順序來的話，就應該去查看其父元素，俗稱「拼爹」

clear Float

若是子元素用了float，若是不清除浮動，父元素沒法撐開子元素

• clear: both：在父元素下增長一個新元素
• overflow: auto
• clearfix： 寫一個類在父元素，利用僞元素插入兩個元素塊

.clearfix:after{
  content: '';
  display: block;
  clear: both;

BFC

直譯爲"塊級格式化上下文"，與外部區域絕不相關，是一個容器，用來管理塊級元素

建立BFC

• float爲left|right
• overflow爲 hidden|auto|scroll
• display爲 table-cell|table-caption|inline-block|inline-flex|flex
• position爲 absolute|fixed
• 根元素

BFC特性

特性1： BFC阻止margin重疊

屬於同一個BFC時，margin會重疊，只要他們之間沒有阻擋（好比邊框、非空內容、padding等）就會發生margin重疊

• 兄弟元素margin重疊，解決方案是，中間加個BFC
• 子元素margin父元素不撐開，解決方案是，父元素BFC

特性2：BFC不會重疊浮動元素

就是把浮動元素和其餘元素分開，行成自適應兩攔佈局

特性3：BFC能夠包含浮動

子元素浮動，就脫離了文檔流，父元素高度坍塌，解決方案是，把父元素變成一個BFC