可點選QR code
文章專區
網頁設計相關文章
不用再清除float浮動了！CSS的display:flow-root屬性
在網頁設計上，用float排版若不清除浮動，會造成父元素塌陷的問題，不然就是改用display:inline-block或flexbox解決。
而現在CSS有一個新屬性display:flow-root，可以讓你不用再特地清除浮動囉！
範例：
display:flow-root 的生效條件
1. float的值不是none
2. overflow的使用值不是visible
3. display的值為table-cell、table-caption、inline-block或inline-table
4. position的值既不是static也不是relative
5. block-progression的值為lr或rl，其父框的block-progression 的值為tb
6. block-progression ' tb的值為' '，其父框的block-progression的值為 lr或 rl
由於是新屬性的關係，在瀏覽器的兼容性尚有待加強，只可支援firfox 53+、chrome58+、opera45+
而可以使用@supports功能來進行增強漸進處理或是優雅降級處理
@supports(display:flow-root){}
@supports not (display:flow-root){}
範例：
@supports(display:flow-root){
display: flow-root;
}
若瀏覽器支援display:flow-root，會啟用該屬性
@supports not (display:flow-root){
display: inline-block; clear:both;
}
若瀏覽器不支援，則會啟用display: inline-block; clear:both;
