css - 冗余 CSS 规则,即 float 和显示 :block

标签 css

我刚刚发现 float 一个元素也会使它成为一个 block ,因此指定一个 float 属性和 display:block 是多余的。

(如果您尝试指定 display:inlinefloat:left 会发生什么?)

是否还有其他需要注意的冗余组合示例? block 和宽度?等等,

是否有可以检查此类内容的工具?

最佳答案

I just found out that floating an element will also make it a block, therefore specifying a float property and display:block is redundant.

是的,如果您指定了 float: left(或 right),display: block 是多余的。

(What would happen if you tried to specify display:inline and float:left? )

display: inline 不会有任何区别,因为设置 float: left 会强制 display: block “无论如何”:

http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

Otherwise, if 'float' has a value other than 'none', the box is floated and 'display' is set according to the table below.

总结一下这个表:float = display: block

但是,您的 float: left; 的具体示例display: inline 在某种程度上很有用 - it fixes an IE6 bug.

Are there any other examples of redundant combinations to watch out for? block & width ? etc,

一些例子:

  • 如果您设置了position: absolute,则强制使用float: none
  • toprightbottomleft 属性不会有任何影响,除非 position 已设置为默认值 static 以外的值。

Is there a tool that can check for such things?

不这么认为。它不是任何时候都需要的东西,所以我不明白为什么有人会编写这样的工具。

关于css - 冗余 CSS 规则,即 float 和显示 :block,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6372021/

相关文章:

css - jQueryUI 模态对话框 - 拖动会导致 Google Chrome 中的位置发生意外变化

javascript - jQuery Slick 插件在父调整大小后不调整大小

javascript - 将 SeqeunceJS 与 Twitter Bootstrap 3.0 集成

javascript - 捕获 iframe 的屏幕截图

html - Youtube HTML5 iframe 嵌入在 IE 中播放

html - 在 Mozilla 中热衷于使用 CSS3 过滤器?

php - 将自定义 header 放在自己的行中

css - Sass嵌套多个类

jquery - 这是有效的 jquery 代码吗?

html - 在 Twitter Bootstrap 的导航按钮之间放置居中文本