Question

HTML：

 <div id='container'>
  <p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p>
 <img src='image.gif'>
 </div>

CSS：

#container {
    width: 280px;
    margin: 0 auto;
    padding: 10px;
    background-color: #aaa;
    border: 1px solid #999;
}

p {
    width: 100px;
}

img {
    float: right;
}

结果：https://jsfiddle.net/y9Lqjm1f/

为什么如果段落的宽度足够小，浮动的右元素不会出现在容器div的顶部？

Answer 1

因为img元素位于p元素下方，而block element元素位于正常流量之后img。

float的单独流程是应用p样式的结果，仅在p下方开始。

如果您在img下方添加了另一个img，则会遵循正常的布局流程，就好像img不存在一样，如下所示：https://jsfiddle.net/mkarajohn/y9Lqjm1f/1/

简而言之，为了使float显示在顶部，必须将其放在标记的第一位，如下所示：https://jsfiddle.net/mkarajohn/y9Lqjm1f/2/

另请参阅this关于block element和moments' for nil:NilClass): app/controllers/api/v1/moments_controller.rb:8:in s

的信息

一般来说：

浮动元素尊重先前的块元素＆＃39;布局流程，意味着它们出现在上一个块元素
浮动元素后面的块元素忽略浮动元素，并保持它们的正常布局流程，就好像浮动元素不存在一样。

Answer 2

p和img标记是块级元素。他们为下一个元素创建新行。因此，float: right;中的img属性适用于新行。

您可以对display: inline-block;和p代码使用img。

codepen

右侧浮动元素低于常规段落的宽度

2 个答案: