display還有這樣的屬性?

今天看了一篇關于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()來做相應的處理。

如有不到之處,請大家多多指正。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,809評論 1 92
  • 先前在學習CSS float時,有同學提到了BFC這個詞,作為求知好問的好學生,哪里不懂查哪里,那么今天就來研究一...
    這名字真不對閱讀 6,577評論 3 19
  • 一:在制作一個Web應用或Web站點的過程中,你是如何考慮他的UI、安全性、高性能、SEO、可維護性以及技術因素的...
    Arno_z閱讀 1,232評論 0 1
  • 什么是BFC BFC全稱是Block Formatting Context,即塊格式化上下文。它是CSS2.1規范...
    陌客百里閱讀 536評論 3 4
  • 1.Java-maven異常-cannot be cast to javax.servlet.Filter 報錯 ...
    xiang205012閱讀 5,560評論 0 0