how using float css property rendering a span tag without any content inside it?

Question

I have a very simple HTML & CSS structure that I use for practice.

Please check the fiddle link attached.

I was working on a span tag and gave it some height & width but it was not rendering.

I know the reason. span is an inline tag and it does not respect height and width properties.

But suddenly I gave it a float property and it rendered on the page.

My question is how float property is affecting an inline element, even when it does not have any content inside.

body {
  margin: 0;
  padding: 0;
  font-size: 10px;
  line-height: 1.5em;
}

div.wrapper {
  background: pink;
  width: 200px;
  height: 200px;
}

span.round{
  width:60px;
  height:60px;
  background: orange;
  float:right; /** not using float, vanishes the whole span **/
}

<div class="wrapper">
  <span class="round"></span>
</div>

Changing float to left / right has the side effect of changing the display property to block. Similar effect if position is made absolute. — Salman A, Jul 20 '18 at 13:45
@SalmanA was going to remove it also :p .. bad copy/past of the wrong quesiton — Temani Afif, Jul 20 '18 at 13:50

score 0 · Accepted Answer · answered Jul 20 '18 at 13:43

0

Copied from Mozilla Developer section: "As float implies the use of the block layout, it modifies the computed value of the display values". As of the result, the tag will be automatically block type.

answered Jul 20 '18 at 13:43

Takács Botond

136
10

how using float css property rendering a span tag without any content inside it?

1 Answers1