Why Do Inline Elements Behave Like Block Level Elements When Floated

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:

1. If display has the value none, then position and float do not apply. In this case, the element generates no box.
2. 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.
3. Otherwise, if float has a value other than none, the box is floated and display is set according to the table below.
4. 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.
5. 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]

Does floating an element turns it into an inline-block?

From MDN

The float CSS rule will imply changes to the display CSS rule, in some situations, as listed below. But this does not prevent manaully setting the display: CSS rule yourself on a floated element.

As float implies the use of the block layout, it modifies the computed value of the display values, in some cases:

Specified value *  | Computed value X
----------------------------------------
inline             |      block
inline-block       |      block
inline-table       |      table
table-row          |      block
table-row-group    |      block
table-column       |      block
table-column-group |      block
table-cell         |      block
table-caption      |      block
table-header-group |      block
table-footer-group |      block
inline-flex        |      flex
inline-grid        |      grid
*other*            |  *unchanged*

* Specified value is the "display" value inherited or set for the element that is floated.

X Computed value is the Display behaviour that float gives the element if another Display value is not given to the flaoted element.

---

And as noted by FluffyKitten, this post is also well worth reading for some background application.

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>

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:

References:

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

How inline elements float?

Be aware floats do become block-level. So the answer is:

inline-level floats behave exactly like block-level floats

The observed behavior might have surprised you, but that's not due to the floating being (presumably) inline, it's due to the surrounding contents being inline.

See the float rules. A float is always placed as hight as possible, but

• A floating box's outer top may not be higher than the top of its containing block. When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow.
• The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the
  source document.
• The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element
  earlier in the source document.

When a float is mixed with blocks, it's usually limited by the first two rules. But when you mix it with inline elements, then it's the last one.

In your case, you place the float at the middle of the text in the second line. Therefore, its top will be aligned with the top of the second line.

And then, as usual, the float will be pushed to the left, even if that means it might visually appear before some text which preceded it in DOM order.

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

Why don't inline-blocks wrap around floating elements?

The spec says

The border box of a table, a block-level replaced element, or an
element in the normal flow that establishes a new block formatting
context (such as an element with 'overflow' other than 'visible') must
not overlap the margin box of any floats in the same block formatting
context as the element itself.

And a Block formatting context is defined like this

Floats, absolutely positioned elements, block containers (such as
inline-blocks, table-cells, and table-captions) that are not block
boxes, and block boxes with 'overflow' other than 'visible' (except
when that value has been propagated to the viewport) establish new
block formatting contexts for their contents.

_{(Emphasis mine)}

Float and block level elements

It is because the original intended purpose of floats was not to put block elements side by side, but to reproduce the traditional typographical effect of wrapping text around images and boxouts as seen in this diagram from the CSS 2 spec.

There are various workarounds, but you'd probably be better off with display: inline-block, flexbox or CSS grids if you want side-by-side blocks.

Does Float Value break the behaivor of block elements?

The actual CSS rule that you describe as "Block Elements fill the entire width of the page by default" is Block-level, non-replaced elements in normal flow exactly fill the entire width of their containing block, always. Floated elements are not in normal flow, so the rule simply does not apply to them.

Floated elements have a completely separate width rule.

---

Related Topics