The following point is interesting:

Many places write that they say if the element is assigned the property float:left; or float:right; then the display will be set to block !

But I do not agree!

Example:

 .a { float:left; background:yellow; } .b { width:100px; background:red; display:inline-block; } 
 <div class="a">This is Photoshop 1.</div> <div class="b">This is Photoshop 2.</div>

Result: One unit will be in line with the other.

But this is possible when there is an inline-block for both elements. Otherwise, it would be impossible to place 2 blocks on one line, because the whole width would be occupied by a block with display:block; .

Here is another example:

 .a { float:left; background:yellow; opacity:0.7; padding:5px; } .b { background:red; display:block; } 
 <div class="a">This is Photoshop 1.</div> <div class="b">This is Photoshop 2.</div>

Result: one block in a row with another, but behind that only difference that the float element is ignored and the block takes the place under it. Although the text is outside the first block

In the code inspector, an element with float:left; shows display:block; ... again it is not clear! I described my point of view. Explain to me if I misunderstood something.

PS Who did not understand the question!

Why an element with a display:inline-block; property value display:inline-block; , which stands after the element with the property value float:left; is on the same line? (If you hold the same but without float:left; then the elements will not be on the same line because display:block; will take the whole width).

  • float nothing to do with display . You have a display: block, because this is the standard value of this property for the div element - Grundy
  • @Grundy Many resources mention that display will be equal to block. Here I am interested. So anyway, there must be some type of display? - MaximPro
  • @Grundy is wonderful, but does not explain why the yellow block in the example behaves like an inline-block . - Andrey Fedorov
  • @AndreyFedorov, because in fact it does not behave like an inline-block :-) - Grundy
  • 2
    @AndreyFedorov, like a float - it's obvious - Grundy

2 answers 2

float does affect the computed value of the display property; on MDN, you can find a table that provides a complete list of changes.

But this is possible when there is an inline-block for both elements. Otherwise, it would be impossible to place 2 blocks on one line, because the whole width would be occupied by a block with display: block ;.

Let's start with a counter-example:

 p { margin: 5px; } .floats { float:left; background: #ccc; } .dib { display: inline-block; } 
 <p class=dib>1. Something</p> <p class=floats>2. Something</p> <p class=floats>3. Something</p>

Obviously, if the floats behaved the same way as the inline blocks, the order of the elements would be 1, 2, 3, and not 2, 3, 1. If you are confused by the possibility of positioning on one line , then this is not more than a visual effect :-) float so arranged by specification that an element that has this property is removed from the stream and pops up on the left or on the right, and the content of the other blocks flows around it .

The only, in my opinion, similarity between inline-block and float is that they occupy the width that their internal content occupies.

I summarize: Why an element with a display property-value: inline-block ;, which stands after an element with a property value of float: left; is on one line?

Because in the example you cited, the float element (1) loses its ability to occupy 100% of the available width and begins to occupy the width of its content; (1) and inline-block (2) occupy a sufficiently small width to fit on one line. Also, they are in the same block formatting context. If (2) contains, for example, a large paragraph of text, then it will be entirely transferred to the next line, that is, it will not flow around (1).

I recommend the specification , in which there are many examples and, most likely, a more correct and accessible description of the current behavior.

  • By the way, I experimented: I gave the float elements string, block, string-block mappings and, as a result, zero reaction. In addition, I wrote floats for html tags, which by default have a float display mode. As a result, I did not find the standard display mode in the code inspector (most likely this implies an in-line view, although the inspector shows a block for tags with default display) - MaximPro
  • In general, it is surprising that they did not display the display:float-right/left; mode display:float-right/left; It would be more logical in my opinion because dysplay combined with float doesn’t react well, just nothing (maybe I just didn’t notice any values ​​of dysplay). - MaximPro
  • By the way, in the specification that you dropped, I found what it says that it is a display: block; left The element generates a that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property). 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). that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property). - MaximPro
  • As a result, even the specification considers it to be a block element, but does not explain why, maybe I didn’t get to that point - MaximPro

This is true in some cases. For example, if you put it like this:

 .a { display: table-cell; float: left; background: yellow; }

That resulting property will be display: block; Even the sequence is not important:

 .a { float: left; display: table-cell; background: yellow; }

anyway, display: block; .

This must be taken into account when tabular layout is maintained using display: table; and display: table-cell; . Elements need to put float: none; .

  • and who minus something slapped? bother to give a comment or bother to see what I said in the browser inspector. - KAGG Design
  • one
    @KAGGDesign is it logical to answer an unasked question? ) write komenty like everyone else. ))) - Andrey Fedorov
  • one
    @KAGGDesign Логично отвечать на то, как понял вопрос ............... А еще - а где вопрос в тексте вопроса? ............. so you didn’t see the question yet or did you answer some questioned question?)) - Alexey Shimansky
  • one
    "Many people write where they say if the element is assigned the property float: left; or float: right; then the display will be set to block! But I do not agree!" - The author does not agree, but I showed one example, where it is. If the first two phrases do not represent the essence of the question, then in general the whole question should be closed, because its essence is incomprehensible. - KAGG Design
  • one
    Duck the author himself said this. Sorry, but even @Grundy has more constructive comments. - Andrey Fedorov