为什么 float:right 必须位于“正常”之前？左对齐 div？
<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>
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
很难理解你的问题，因为你混合了
justify和float这两个词。文本可以右对齐或左对齐，但 div 不能。它们只能浮动。除此之外，您问题的答案与文档流有关。我认为您所期望的是，将右浮动 div 放在正常浮动 div 之后，它们最终并排放置。也就是说，您希望右浮动 div “知道”您希望它与文档流中位于其上方的 div 并排。
但它为什么要知道这一点呢？
也许你的意思是它与 div 并排放置在流程的上方或下方。正如您所看到的，这有点随意。如果它上面没有 div 浮动在旁边会发生什么？
相反，编写 CSS 的人决定 div 将从文档浮动中出现的任何位置水平浮动，并在此时脱离流程。因此，通过将右浮动 div 放在普通 div 上方，您可以告诉它从文档中的该点向右浮动，而其他所有内容都会“向上移动”。
有帮助吗？
It's difficult to follow your question because you mix the words
justifyandfloat. 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?