CSS Display Property When a Float Is Applied

css display property when a float is applied

If I read the spec correctly, and practice confirms this, setting float: left or right overrides the display property anyway and forces display: block on the element (although with peculiarities, see below), so there will no difference between your three examples:

left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property).
right
Similar to 'left', except the box is floated to the right, and content flows on the left side of the box, starting at the top.
none
The box is not floated.

Differently from normal display: block though, setting float dictates its own behaviour in regards to width that override the display property: if no width was explicitly specified, the floated element will take up as much width as it needs, as opposed to standard block element behaviour of taking up 100% width automatically.

How does float property blockify the element?

“There is a simple solution that fixes many of the IE float bugs. All floats become a block box; the standard says that the display property is to be ignored for floats, unless it’s specified as none. If we set display:inline for a floating element, some of the IE/Win bugs disappears as if by magic. IE/Win doesn’t make the element into an inline box, but many of the bugs are fixed.”
[Float Layouts]

As that suggests, the primary reason the block is added is for fixing issues that came up with floats in IE. Although the display:block is implicitly defined, display values aren't technically applied to floated elements except for if it is set to none.

If you want to learn more about floats, this is a pretty good article: CSS Float Theory: Things You Should Know

Is it redundant to use display: inline and float: left together?

Actually there is no need to use both the properties together, but as you are using two classes having respective properties is fine, let me explain you here, if you use display: inline; ONLY, than first you need to see how inline is it different from float

Inline Elements

Floated Elements

Now, yes, am aware that span are already inline elements, but if you see, when I use float, it makes an inline element behave like an inline-block, it applies margins at top and bottom as well, while display: inline; won't.

Another difference is float is in general different positioning, when you float an element to left or right, it creates an empty space besides, which makes element below it to shift besides that.

Floated Example

While display: inline; won't

Inline Example

See the difference? So it depends on you what suits best to your needs, just make sure you clear your floating elements by using overflow: hidden; or any clearfix available out there else you will see some unexpected behavior of your layout.

Conclusion: Even if you use display: inline;, your element will be a block level element and inline, so there's no need to use display: inline;

CSS display not inheriting when using float

Essentially, the float property makes the computed display value block...so that is what is being inherited.

See: Float @ MDN

Rather than try to use display:inline-block on the required children, just float them also...as follows:

.a {  display: block;}.b {  float: right;  background: red;}.c {  background: #f06d06;  float: left;  padding-left: 1rem;}

<div class="a">  <div class="b">    <div class="c">I'm floated</div>    <div class="c">So am I</div>    <div class="c">Me too.</div>  </div></div>

float property for inline element

In accordance with CSS rules, when you apply float to an element, in most cases it becomes a block element. Elements that are inline and inline-block will compute to block.

From MDN:

Sample Image

References:

9.7 Relationships between display, position, and float
float definition at MDN

Why adding the property float left makes the div behave like an inline-block

Using float takes the elements out of the normal document flow in a way that other inline elements can wrap around them; it does not make them behave like inline-block elements.

If you would like alternative ways to achieve the same effect, give a look at the following examples.

Example 1:

Here's an example using display: flex on the parent element to make the children stay on the same line.

body {  display: flex;}
#block1 {  width: 20%;  background-color: red;  height: 100px;}
#block2 {  width: 70%;  background-color: yellow;  height: 100px;}

<div id="block1"></div><div id="block2"></div>

CSS Display and Float Properties

Will the display property of an inline
element change once a float property
is applied? e.g. What will be the the
display property of an anchor tag with
float:left?

The display property will be unchanged. If by ‘anchor tag’ you mean ‘A element’, then the display property would still be set to inline (by default).

Also, what will happen with its parent
display property, will it also change?

The display property of the parent element will remain the same as well.

Why do inline elements behave like block level elements when floated?

This behavior is defined in the point 3 of this CSS2.1 section:

9.7 Relationships between display, position, and float
The three properties that affect box generation and layout — display, position, and float — interact as follows:
If display has the value none, then position and float do not apply. In this case, the element generates no box.
Otherwise, if position has the value absolute or fixed, the box is absolutely positioned, the computed value of float is none, and display is set according to the table below. The position of the box will be determined by the top, right, bottom and left properties and the box's containing block.
Otherwise, if float has a value other than none, the box is floated and display is set according to the table below.
Otherwise, if the element is the root element, display is set according to the table below, except that it is undefined in CSS 2.1 whether a specified value of list-item becomes a computed value of block or list-item.
Otherwise, the remaining display property values apply as specified.
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━┓
┃ #Specified value#                                        ┃ #Computed value# ┃
┡━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╇━━━━━━━━━━━━━━━━━━┩
│ inline-table                                             │ table            │
├──────────────────────────────────────────────────────────┼──────────────────┤
│ inline, table-row-group, table-column, table-column-group│ block            │
│ table-header-group, table-footer-group, table-row        │                  │
│ table-cell, table-caption, inline-block                  │                  │
├──────────────────────────────────────────────────────────┼──────────────────┤
│ others                                                   │ same as specified│
└──────────────────────────────────────────────────────────┴──────────────────┘

In Display Level 3, this process is called blockification:

2.7. Automatic Box Type Transformations
Some layout effects require blockification or inlinification of the box type, which sets the box’s outer display type, if it is not none or contents, to block or inline (respectively).
Some examples of this include:
Absolute positioning or floating an element blockifies the box’s display type. [CSS2]

Redundant CSS rules ie float & display: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.

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:

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.

CSS Display Property When a Float Is Applied