Menu
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?
440
CSS float is still relevant. We should just use it in the right context! This article discusses the history of CSS float and demonstrates several ways that float can be used in modern web design to achieve creative text layouts and stunning design elements.
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
To clear a float, add the clear property to the element that needs to clear the float. This is usually the element after the floated element. The clear property can take the values of left , right , and both . Usually you'll want to use both.
Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side. float:right; This property is used for those elements(div) that will float on right side.
I just found out that floating an element will also make it a block, therefore specifying a
floatproperty anddisplay:blockis 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":
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.
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:
position: absolute, then float: none is forced.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.
101
From my experience IE6 has problems with float:left. For compatibility, display:inline is added with floating statements.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
