今天看了一篇關(guān)于display的文章，在這和大家分享一下影锈。CSS中的一個(gè)新屬性flow-root芹务。這個(gè)屬性是CSS Display Module Level3中的一個(gè)屬性。簡(jiǎn)單講這個(gè)屬性是display中的一個(gè)新屬性鸭廷，對(duì)于display屬性枣抱，大家熟悉的可能是常見的幾個(gè)屬性，比如block辆床、inline佳晶、inline-block、flex讼载、grid轿秧、table和table-cell等。
- 那flow-root既然是display的新屬性值咨堤，那這個(gè)屬性值有什么特性呢菇篡？
- flow-root是最新一種創(chuàng)建BFC的屬性。(Firefox53和Chrome58兩大主流瀏覽器目前都支持)
** 關(guān)于BFC:BFC中的元素的布局是不受外界的影響（我們往往利用這個(gè)特性來(lái)消除浮動(dòng)元素對(duì)其非浮動(dòng)的兄弟元素和其子元素帶來(lái)的影響一喘。）并且在一個(gè)BFC中驱还，塊盒與行盒（行盒由一行中所有的內(nèi)聯(lián)元素所組成）都會(huì)垂直的沿著其父元素的邊框排列。**
通俗來(lái)講凸克，就是另一種清除浮動(dòng)议蟆、解決塌陷的方法，我們之前用一下幾種：
1萎战、給父級(jí)overflow：hidden咐容；
2、給父級(jí)高度：heigth撞鹉；
3疟丙、加一個(gè)div空標(biāo)簽，clear：both鸟雏；
4享郊、clearfix：after{ content:""; display:block; clear:both; }
給父級(jí)一個(gè)diaplay：flow-root也可以達(dá)到以上效果。
雖然主流瀏覽器Firefox 53+孝鹊、Chrome 58+和Opera 45+都支持flow-root屬性(有關(guān)于瀏覽器對(duì)該屬性的兼容性炊琉，可以通過Caniuse.com來(lái)查詢)。但實(shí)際當(dāng)中，我們必竟有很多業(yè)務(wù)需求是需要兼容一些低版本的苔咪。對(duì)于一位CSS的極度愛好者锰悼，總是喜歡在項(xiàng)目中不斷的嘗試使用一些新特性。為了更好對(duì)flow-root做降級(jí)處理团赏，我們可以通過CSS的條件屬性@supports()來(lái)做相應(yīng)的處理箕般。
如有不到之處，請(qǐng)大家多多指正舔清。
