Why must a float:right precede a "normal" left-justified div?_问答_开发者

Why must a float:right precede a "normal" left-justified div?

开发者 https://www.devze.com 2023-04-02 16:07 出处：网络

<html> <head> <style type=\"text/css\"> div, p {border: 1px dashed;} </style> </head>

相关专题：css-float

<html>
<head>
   <style type="text/css">
      div, p {border: 1px dashed;}
   </style>
</head>
<body>

<!-- Why must the text that's intended to be right-justified *PRECEED*
   the text that is to be left-justified? It "feels" like the syntax should
   simply read from top to bottom:

   <div>
   "Put some text here"
   "Then put some text here, but align it right"
   </div>

   Instead, this seems to work:
   <div>
   "The right-justified text has to go first"
   "Then we code the 'normal' left-justified text"
   </div>

   I see how to 'make it work', but I'm curious as to the logic behind this
   seemingly 'backwards' syntax.  What am I misunderstanding?
-->

<div>

   <!-- Does NOT work as intended -->
   <div>
      <p>I am on the Left</p>
   </div>

   <div style="float: right;">
      <p>I am on the RIGHT, but I don't align</p>
   </div>


   <开发者_如何学运维br />
   <br />
   <br />


   <!-- Works as intended -->
   <div style="float: right;">
      <p >I am on the RIGHT, and I mostly align</p>
   </div>

   <div>
      <p class="">I am on the Left</p>
   </div>


</div>

</body>
</html>

It's difficult to follow your question because you mix the words justify and float. Text can be justified right or left, divs cannot. They can only be floated.

That aside, the answer to your question has to do with document flow. I think what you're expecting is that you put the right-floating div after the normal-floating div and they end up side by side. That is, you expect the right-floating div to "know" that you want it to be side-by-side with the div just above it in the document flow.

But why should it know that?

Perhaps you mean it to be side by side with a div further up the flow, or further down. As you can see, it's kind of arbitrary. And what would happen if there was no div above it to float next to?

Instead, the people who put together CSS decided that the div would float horizontally from where-ever it appeared in the document float, stepping out of the flow at that point. So, by putting the right-floating div above the normal div, you're telling it to float right from that point in the document, and everything else "moves up".

Did that help?