1

Why do we say that the display property of floated elements may change to block level, instead of saying inline-block, because it starts taking the space according to the content it wraps?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Suraj Kumar
  • 21
  • 1
  • Because of their behavior. As explained here: https://stackoverflow.com/questions/1702669/what-is-the-difference-between-floatleft-vs-displayinline-while-every-element – Lowell Ed Llames Oct 22 '18 at 06:59
  • 2
    @ShireeshaParampalli CSS code of what? The asker is aksing a clear question that doesn't need any HTML/CSS code – Temani Afif Oct 22 '18 at 09:03

2 Answers2

5

inline-block means inline level, block container.

inline-level elements participate in the layout of a line (or multiple lines). This affects line spacing and the vertical alignment of other elements in the same line.

Floated elements do none of that. The participate in block formatting contexts, not inline formatting contexts.

Alohci
  • 78,296
  • 16
  • 112
  • 156
  • 1
    I would probably add that float element are *shrink to fit content* by design that's why we may think that they are more inline-block than block element *(an intuitive reflexion of a new coder)* – Temani Afif Oct 22 '18 at 09:24
  • Not to forget the fact that floats are arranged horizontally. – BoltClock Oct 22 '18 at 09:53
  • Historically the `display` property seems to control primarily the outer display type (i.e. the inline level part of `inline-block`). The outer display type of floated elements resembles inline elements more than block ones, so what not use just `inline` for them rather than `block` or `inline-block`? – wlnirvana Jan 29 '20 at 14:49
  • @wlnirvana - For non-replaced elements, floats, in-flow inline-block and in-flow block elements are all block containers, whereas inline elements are not, so "inline" would not be appropriate. As explained in my answer, floats do not participate in the layout of a line box, whereas inline, inline-block, inline-table, inline-flex and inline-grid elements do. – Alohci Jan 29 '20 at 15:40
  • To understand what I mean about not participating in a line box, I recommend you have a look at the example in [my answer to "What is the difference between display: inline-block and float: left"](https://stackoverflow.com/questions/42741908/#42742235) – Alohci Jan 29 '20 at 15:46
  • I think the part *They participate in block formatting contexts* is the ambiguous one because it's not trivial to understand what is a BFC and how float *participates* to it. Like Bolt commented, we have horizontal arrangement so, well, it sounds like inline because inline means (for the majority) no line break. Maybe you can elaborate the answer :) I feel this will be a target duplicate for many question in the future. – Temani Afif Jan 29 '20 at 19:54
  • @TemaniAfif Indeed. In fact I have just posted another question ["Is the motivation behind block formatting context to create a mini-page to contain all its descendents?"](https://stackoverflow.com/q/59978063/2160440) – wlnirvana Jan 30 '20 at 01:54
  • @Alohci To rephrase and confirm my understanding, floated elements are different from `inline` elements in two ways: 1) regarding internal style type for its descendants, it is a block container, generating a BFC instead of an inline formatting context; 2) regarding outer style type, its vertical alignment and margin stuff behave more like a `block` instead of `inline` element. Thus it is inappropriate to compute the display value as `inline`. Is this correct? – wlnirvana Jan 30 '20 at 02:07
  • 1
    @wlnirvana - re: 1) It's a block container and establishes a BFC yes. But not *instead of* an IFC. If it only has inline descendants it will establish an IFC *as well as* a BFC. re: 2) Pretty much yes. The line box is a key concept is layout, affecting things like line height and therefore how text is spaced out vertically. Floats aren't contained within line boxes and therefore can't affect the spacing. For practical purposes, it's more important that they aren't inline level, than what level they actually are. – Alohci Jan 30 '20 at 02:25
  • While the differences make sense to me, nearly all resources online seem to indicate that the single most important feature of inline display is (outer type) horizontal arrangement with its surrounding sibling elements. Thus I think although the float display is indeed different from inline, `inline` might still be a relatively better choice than `block` for the computed value in order to reduce the confusion. – wlnirvana Jan 30 '20 at 04:22
-1

That is the purpose of float. found some information in here

The float CSS property specifies that an element should be placed along 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 web page, though still remaining a part of the flow (in contrast to absolute positioning).

Also

when an element is floated, it is taken out of the normal flow of the document (though still remaining part of it). It is shifted to the left, or right, until it touches the edge of its containing box, or another floated element.

Jewel
  • 49
  • 7