你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
liermao

css技巧之:css新属性display:flow-root 介绍。 0个回复 专栏 @ CSS

liermao 发布于 7 月前

前两天刷微博,无意间看到张鑫旭大大推荐了大漠大大的一篇文章,说的就是css的新属性。今早上班也立马把chrome的最新版本下载下来体验的一下这个属性。感觉还是很实用的一个属性。至少在代码量方面能少写几行。哈哈哈。开个玩笑。 我们先来看看官方的解释。

flow-root
The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents. [CSS2]。

翻译:元素生成块容器框,并使用流布局将其内容列出来。它总是为其内容建立新的块格式化上下文。(百度翻译)

解释一下:就是说使用这个属性之后,该元素会生成一个块级容器框,并且使用的是流布局。为里面内容创建新的块级格式化上下文。

我们知道float属性 有破坏性,父级不清除浮动的话,会造成父级塌陷。如图,box1和box2浮动,content不清除浮动。

我们会看到父级元素的content的高度为0。这就是float的破坏性,这就是为什么建议大家用display:inline-block去替代float的原因。

在给content加上flow-root的属性之前,先看看display:flow-root的生效条件

float '的值不是none。
overflow的使用值不是 visible
display的值为table-cell,table-caption'(见 [CSS3TBL]),inline-block'或' inline-table'。
“ position ”的值既不是static“也不relative”(参见[CSS3POS])。
“ block-progression ”的值为“ lr或” rl,其父框的“ block-progression ”的值为tb“
' block-progression ' tb的值为' ',其父框的' block-progression '的值为' lr'或' rl'。

感觉条件不是很苛刻。

最重要的一个问题,兼容性;

很遗憾,只有最火狐53+,chrome58+,opera45+,才支持。不过未来,应该都会支持吧。

下面就是一张用了display:flow-root属性。

我们看到父盒子不在因为子元素的浮动造成塌陷。感觉很实用是吧。嘻嘻。

我的webstrom里面写这个属性都是报错的,嘻嘻。

我们也可以用@supports(display:flow-root){}来进行优雅降级处理。
或者用@@supports not (display:flow-root){}来进行渐进增强处理。

不过建议还是未来几个月还是老老实实的清除浮动,或者用display:inline-block吧。

更细致的介绍还请看大漠老师的文章:https://www.w3cplus.com/css3/display-flow-root.html。

等待第一条回复
登录后回复,如无账号,请使用邀请码注册