-3

I've always thought up to now that floating an element makes him an "inline-block". But now i am questioning this, since a floating "table" does not behave like an inline-block, and while making a "div" float makes the element behave like an inline-block, using the chrome inspect tool shows that the element it actually a "block". I am confused. If the element is "display:block", why does it behave like an inline-block then, i.e. the height and width become the height and width of the child-element or content? Does floating an element not make the element an inline-block?

HTML:

    <div style="background-color:blue; padding:5px">
    
        <div style="background-color:red">This is the child-div</div>
    
    </div>

Now, as you can see, the container's width is 100% of its container, i.e. the body, and the width of the child-element is 100% of its container, i.e. the first "div".

Now, let's add "float" to the container.

    <div style="background-color:blue; padding:5px; float:right">
    
        <div style="background-color:red">This is the child-div</div>
    
    </div>

Now, as you can see, the width of the container has collapsed. It's not 100% of its container anymore, it's now taken the width of its child-element, exactly what it expected from an inline-block element.

Example with an inline-block:

    <div style="background-color:blue; padding:5px; display:inline-block">
    
        <div style="background-color:red">This is the child-div</div>
    
    </div>

As you can see, we see the same behavior. The width of the container becomes the width of the child-element. Floating and Inline-block therefore behave the same with the exception that inline-block elements obviously don't float right or left, they stay on place.

So, my question is, why does floating a block-level element makes it behave like an inline-block element, if it does not actually become an inline-block element?

Martin
  • 22,212
  • 11
  • 70
  • 132
  • Comments are not for extended discussion; this conversation has been [moved to chat](https://chat.stackoverflow.com/rooms/219983/discussion-on-question-by-i-love-coffee-does-floating-an-element-turns-it-into-a). – Samuel Liew Aug 17 '20 at 14:39

2 Answers2

2

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.

Rob
  • 14,746
  • 28
  • 47
  • 65
Martin
  • 22,212
  • 11
  • 70
  • 132
  • This doesn't answer my question. Does floating an element makes it an inline-block, and if not, then why does it behave like one? –  Aug 17 '20 at 12:08
  • 1
    @IloveCoffee this exactly does answer your question - The table I copied above from the referenced source shows exactly that answer; that **in certain situations** the floating of an element *does* cause it to behave similarly to a particular display type. – Martin Aug 17 '20 at 12:10
  • 1
    So as you can see; an inline element that is floated, will behave as a block element that is floated. You can have a floated inline element that is computed as such; it will be "promoted" to being a block level element etc. – Martin Aug 17 '20 at 12:12
  • The other answer just says that a float makes the element a block level, and that the purpose of inline-block is to be "block container that sits inside a line box. It forms an inline-level, block container". Now, first of all, that explanation only confuses me even more, because first of all, again, if floating an element makes it a block-level, then why does it behave exactly like an inline-block, and second, what does it mean to "sit inside a line box"? What is a "line box"? and what is "inline-level block container"? –  Aug 17 '20 at 12:14
  • 1
    Sorry, but there is a difference between something not being an answer, and something not being understood. It is the answer you're asking for, but you may not be able to yet fully understand it. Like the number 42. – Martin Aug 17 '20 at 12:16
  • But i am not floating an "inline- element", i am floating a Block-level element, i.e a simple "div". –  Aug 17 '20 at 12:17
  • 1
    @IloveCoffee As Martin says, they behave the same in certain situations, not in others. If you don't understand how or why, it doesn't really matter - just use them if they work for you. We can't tell you any more than we already have. – FluffyKitten Aug 17 '20 at 12:18
  • Then explain it to me so i can understand it. So far i am not getting an answer to my question that makes sense to me. –  Aug 17 '20 at 12:18
  • "they behave the same in certain situations" -- you mean that, floating a div makes it an inline-block sometimes, and sometimes it doesn't? or do you mean that, floating some elements make them inline-block, and others it makes them block level elements? That's fine, but again, if floating a simple div makes it behave like an inline-block, why does it inspector tools shows that it's Display:block? Is it an inline-block or not? –  Aug 17 '20 at 12:20
  • Also, the graph above does not include "block-level" elements, which was my main question. –  Aug 17 '20 at 12:21
  • Please see `*other* | *unchanged*` for block level elements. – Martin Aug 17 '20 at 12:22
  • A floated div is never set to being `display: inline-block;` *by the float*. It is usually set to `block`. If you have a floated div that is inline-block then something else is setting this outside of the float CSS rule. – Martin Aug 17 '20 at 12:24
  • A div has the width of its container, i.e. it takes the width of the entire page, but when you float it, the width collapses and shrinks to adjust to the width and height of its child-element. That's exactly what an inline-block does. That's the reason why i thought that floating makes the block level element become inline-block. –  Aug 17 '20 at 12:28
-1

There doesn't seem to be a clear answer to this. Here's my research and findings.

Floats may change the way the display property of the element behaves. For block-level elements, when we float them, they lose their property of taking up all available width and instead wrap themselves around the content they contain. As such, they behave more like inline-block elements, even though their display property remains as block in CSS.

Similarly, for inline-level elements, once they are floated, start to accept box-level properties such as height and width. It is important to remember that elements only change their behavior, and not their set property value as such.

Reference:

https://uxdesign.cc/float-58b9685f3928

Eric Aya
  • 69,473
  • 35
  • 181
  • 253
Mark Usman
  • 5
  • 5
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 01 '23 at 04:39