内联元素如何浮动？

时间：2016-09-04 02:12:37

标签： html css css3

在下面的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内联元素具有float属性，如下所示

img[src="LittleBrain.jpg"] {
  float: left;
  padding: 10px;
}

布局如下所示。

enter image description here

以下是在浏览器上呈现的输出

enter image description here

我的问题是：

根据浏览器输出，我无法理解浮动元素img的行为及其在html文档流中的位置。

根据我的理解，块级元素（比如说div）浮动，如下图所示，在3D视图浏览器中，

enter image description here

在上面给出的代码中，内联元素（img）是如何浮动的？ 3D视图将帮助我理解浮动内联元素的行为。

1 个答案:

答案 0 :(得分：4)

请注意floats执行become block-level。所以答案是：

  

内联级浮点数的行为与块级浮点数完全相同

观察到的行为可能让您感到惊讶，但这不是由于浮动（可能）内联，而是由于周围内容内联。

请参阅float rules。浮动总是尽可能高，但

  
      
  • 浮动盒的外顶部可能不高于其包含块的顶部。当浮动发生在两个折叠边距之间时，浮动的位置就好像它有一个空的匿名块父级参与流程。
    •   
  • 浮动框的外部顶部可能不会高于任何块的外部顶部或由前面的元素生成的浮动框。   来源文件。
    •   
  • 元素浮动框的外部顶部可能不高于包含元素生成的框的任何行框的顶部   在源文件的早期。
    •   

当浮子与积木混合时，它通常受前两条规则的限制。但是当你将它与内联元素混合时，它就是最后一个元素。

在您的情况下，将浮动放置在第二行中文本的中间。因此，它的顶部将与第二行的顶部对齐。

然后，像往常一样，浮动将被推到左侧，即使这意味着它可能在DOM顺序之前的某些文本之前可视地出现。

相关问题
最新问题