Redundant CSS rules ie float & display:block

Question

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

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

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

Is there a tool that can check for such things?

I don't know what you mean "redundant request for 'other examples" and "a tool to check for such things'" — hooleyhoop, Jun 16 '11 at 13:02
@thirtydot: I think you mis-read the Question > given "float:left; display:block;" the "display:block" is redundant, no? I wondered what other combinations might be redundant. "display: roflcopter; float: top" is your best example? — hooleyhoop, Jun 16 '11 at 13:32
I'm going to write a better answer to replace the comments I'm about to remove. — thirtydot, Jun 16 '11 at 14:21
From https://developer.mozilla.org/en-US/docs/Web/CSS/float - "As float implies the use of the block layout, it modifies the computed value of the display values in some cases:" — KyleMit, Mar 10 '17 at 00:00

score 20 · Accepted Answer · edited May 23 '17 at 12:25

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

Yes, display: block is redundant if you've specified float: left (or right).

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

display: inline will not make any difference, because setting float: left forces display: block "no matter what":

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

To summarize said table: float = display: block.

However, your specific example of float: left; display: inline is useful in one way - it fixes an IE6 bug.

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

Some examples:

If you set position: absolute, then float: none is forced.
The top, right, bottom, left properties will not have any effect unless position has been set to a value other than the default of static.

Is there a tool that can check for such things?

I don't think so. It's not something that is ever needed, so I can't see why anybody would have written such a tool.

Thanks for the examples, exactly what i was looking for. Just as an example, a quick look thru Stack Overflow's css shows many classes which specify float:left and display:block - you don't think that it's good practise to remove unnecessary stuff from css files, and that a tool for this could be helpful? — hooleyhoop, Jun 16 '11 at 14:45
It's not really a *problem* per se, because CSS files are often hundreds if not thousands of lines long, and removing a single property isn't going to make any noticeable difference. But yes, I'd agree that it's good practise to leave it out because it's unnecessary. After all, "perfection is achieved when there is nothing left to take away". — thirtydot, Jun 16 '11 at 14:59

score 1 · Answer 2 · answered Jun 16 '11 at 12:47

1

From my experience IE6 has problems with float:left. For compatibility, display:inline is added with floating statements.

answered Jun 16 '11 at 12:47

Candide

2 Answers2