Html 内联元素如何浮动？_Html_Css

Html 内联元素如何浮动？

html css

Html 内联元素如何浮动？,html,css,Html,Css,在下面的html代码中 <body> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <img src="LittleBrain.jpg"> Ut enim ad minim ve

在下面的html代码中

<body>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. <img src="LittleBrain.jpg"> Ut
          enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur. Excepteur sint occaecat cupidatat non proident,
          sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

        <div><img src="LittleBrain.jpg"></div>
  </body>

布局如下图所示。下面是在浏览器上呈现的输出

我的问题是:

根据浏览器输出，我无法理解浮动元素

img

的行为及其在html文档流中的位置

根据我的理解，块级元素（比如

div

）在3D视图浏览器中浮动，如下所示

在上面给定的代码中，内联元素（

img

）如何浮动？3D视图将帮助我了解浮动内联元素的行为。

请注意。所以答案是：

内联级别浮动的行为与块级别浮动完全相同

观察到的行为可能会让您感到惊讶，但这并不是因为浮动被（大概）内联，而是因为周围的内容被内联
看。浮子总是放在尽可能高的位置，但是

浮动框的外部顶部不得高于其包含块的顶部。当浮动发生在两个折叠边距之间时，浮动的位置就好像它有一个空的匿名块父级参与流一样

浮动框的外顶部不得高于任何块或浮动框的外顶部，该块或浮动框是由之前的元素生成的源文件

元素浮动框的外部顶部不得高于包含元素生成的框的任何行框的顶部在源文档的前面部分

当浮动与块混合时，它通常受到前两条规则的限制。但是当你把它和内联元素混合在一起时，它就是最后一个了
在本例中，将浮点放置在第二行文本的中间。因此，其顶部将与第二行的顶部对齐

然后，像往常一样，浮子会被推到左边，即使这意味着它可能会以DOM顺序出现在前面的某个文本之前。
图像在段落中浮动，因为它列在标记中。浮动元素变为块级的事实意味着没有内联级浮动。无论你从哪里引述，我都觉得很困惑。
img[src="LittleBrain.jpg"] { float: left; padding: 10px; }