今天看了一篇關于display的文章,在這和大家分享一下。CSS中的一個新屬性flow-root。這個屬性是CSS Display Module Level3中的一個屬性。簡單講這個屬性是display中的一個新屬性,對于display屬性,大家熟悉的可能是常見的幾個屬性,比如block、inline、inline-block、flex、grid、table和table-cell等。
- 那flow-root既然是display的新屬性值,那這個屬性值有什么特性呢?
- flow-root是最新一種創建BFC的屬性。(Firefox53和Chrome58兩大主流瀏覽器目前都支持)
** 關于BFC:BFC中的元素的布局是不受外界的影響(我們往往利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。)并且在一個BFC中,塊盒與行盒(行盒由一行中所有的內聯元素所組成)都會垂直的沿著其父元素的邊框排列。**
通俗來講,就是另一種清除浮動、解決塌陷的方法,我們之前用一下幾種:
1、給父級overflow:hidden;
2、給父級高度:heigth;
3、加一個div空標簽,clear:both;
4、clearfix:after{ content:""; display:block; clear:both; }
給父級一個diaplay:flow-root也可以達到以上效果。
雖然主流瀏覽器Firefox 53+、Chrome 58+和Opera 45+都支持flow-root屬性(有關于瀏覽器對該屬性的兼容性,可以通過Caniuse.com來查詢)。但實際當中,我們必竟有很多業務需求是需要兼容一些低版本的。對于一位CSS的極度愛好者,總是喜歡在項目中不斷的嘗試使用一些新特性。為了更好對flow-root做降級處理,我們可以通過CSS的條件屬性@supports()來做相應的處理。
如有不到之處,請大家多多指正。