Flow-root：優化CSS布局的最佳選擇

一、什麼是flow-root?

在CSS中，我們經常會遇到父元素高度無法被子元素撐起的情況。比如，我們想讓父元素的背景色或邊框覆蓋在子元素上，但是父元素的高度由其子元素的高度決定，子元素內容變化時，父元素的高度無法自適應。在這種情況下，我們可以使用BFC（Block Formatting Context）來解決這個問題。而Flow-root是一種常用的創建BFC的方法。

Flow-root是容器元素的新屬性。它為容器元素創建了一個新的BFC，可以隔離其子元素對外面的元素的影響。它最常用於解決margin垂直方向重疊(Margin collapsing)的問題，以及清除浮動造成的布局破碎等問題。在不需要使用clearfix類似的解決方案的情況下，可以使用Flow-root作為更簡單的解決方案。

.box {
  display: flow-root;
}

二、Flow-root的特點

1、創建BFC

Flow-root可以為容器元素創建BFC，使得該元素成為一個獨立的自包含塊級格式化上下文。

舉個例子，當我們需要在父元素上設置 overflow: hidden 以防止子元素浮動溢出時，可以使用 flow-root 代替 overflow: hidden。

.box {
  display: flow-root;
  /* overflow: hidden; */
}

2、隔離外部元素

Flow-root可以將一個容器元素的內容和子元素隔離開來，防止它們溢出父元素。

例如，一個包含浮動子元素的容器，在設置了 overflow: hidden 或者其他 BFC 規則之後，將會生成一個新的塊級格式化上下文並阻止父元素大小的塌陷。

3、margin垂直方向重疊問題解決

Flow-root可以解決margin垂直方向重疊(Margin collapsing)問題。

Margin垂直方向重疊是指兩個相鄰元素的Margin垂直距離會縮小到一個較大的值。Flow-root會使包含盒子成為BFC，形成邊界，從而防止外部Margin進入到包含塊內部。

三、Flow-root的應用場景

1、解決float浮動造成的高度塌陷

在 float 浮動元素後面加上 clear 屬性也可以解決高度塌陷問題，但是 clear 屬性不如 Flow-root 方便和靈活，特別是在使用 :after 偽元素去清除浮動時缺點較為明顯。

.box:after {
  content: "";
  display: table;
  clear: both;
}

.box {
  display: flow-root;
}

2、處理margin垂直方向重合問題

理論上，如果我們想要避免兩個相鄰元素的Margin重疊，可以使用 BFC 或 IFC 來解決。但是在實際應用中，在不清除浮動的情況下，要使用BFC或IFC來處理 margin 重合問題就需要花費額外的代碼和功夫。使用flow-root這個CSS屬性，解決margin垂直方向重疊問題將是易如反掌的事情。

.box {
  display: flow-root;
}

3、將子元素完全包裹

如果容器元素中的子元素使用了 float 或者絕對定位，容器元素的高度將無法自適應。在這種情況下我們可以使用flow-root來解決這個問題。

.box {
  display: flow-root;
}
.box-child {
  position: absolute;
  left: 0;
  top: 0;
}

四、Flow-root的瀏覽器兼容性

目前，Flow-root在大部分現代瀏覽器中的兼容性良好。IE 11 和 Edge 11 瀏覽器需要使用-ms-flow-into替代display: flow-root，不支持flow-root。

五、總結

Flow-root是一種比較新的屬性，它可以輕鬆解決布局中經常出現的問題。它的使用場景主要包括解決float造成高度塌陷問題，處理margin垂直重疊問題，完全包裹子元素等。雖然IE 11和Edge 11不支持flow-root，但作為一種優化布局的CSS屬性，Flow-root應該會在未來的布局中扮演著更加重要的角色。