float rule 6: The outer top of an element's floating box may not be higher than the top of any-CodePudding

I can understand this rule, but after I wrote some examples, I was a little uncertain. XD

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.

float element's outer top higher than the top of line box by modifying margin-top to negative.

body {
  padding-top: 100px;
  width: 400px;
}

.left {
  float: left;
}

div {
  border: 1px solid red;
  height: 300px;
  padding: 80px 10px;
  box-sizing: border-box;
}

span {
  border: 1px solid red;
  margin: 0 10px;
}

.mt {
  margin-top: -100px;
}

<div>
  <span> Because you don't know What it means to me Love of my life </span>
  <span>
    Is this the real life? Is this just fantasy?
    <img  src="https://via.placeholder.com/50" alt="" />
  </span>
  <span
    >Each morning I get up I die a little Can barely stand on my feet Take a
    look in the mirror and cry Lord, what you're doing to me</span>
</div>

CodePudding user response：

float element's outer top higher than the top of line box by modifying margin-top to negative.

That's incorrect. The "outer top" is defined as the top outer edge of the margin box. The margin-top: -100px; means that (since the img has 0 borders and padding) the top of the margin box is 100px below the top of the content box (i.e. where the image is shown).