html - 具有宽度的常规段落下方的右浮动元素

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 元素 遵循正常流程。

img 的单独流，是由于它应用了 float 样式而产生的，仅在 p 下方开始。

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

简而言之，为了让 img 出现在顶部，它必须放在标记的最前面，如下所示:https://jsfiddle.net/mkarajohn/y9Lqjm1f/2/

另见 this 关于 float 和 block element

一般来说:

• float 元素遵循前一个 block 元素的布局流，这意味着它们出现在前一个 block 元素的下方
• 跟随 float 元素的 block 元素忽略 float 元素，并保持其正常布局流，就好像 float 元素不存在一样。