困惑显示：内联和浮动：左

假设我有两个元素：困惑显示：内联和浮动：左

<span class="b">This is inline element</span> 
<div class="a"></div> 

.a { 
    width:100px; 
    height:100px; 
    background: red; 
    float: left; 
}

的span元件是浮子元件之后：demo

但我认为内联元件是在标准流量，所以它的位置不应该由浮动元素影响？这是为什么发生？

来源

2013-04-16 hh54188

的spec may clear this up for you

在块格式化上下文中，每个盒的左侧外边缘接触到包含块的左边缘（从右到左的格式化，右边缘的触摸）。这是真实的，即使在浮子的存在...除非盒建立一个新的块格式上下文

至于内嵌元素

通常，线框的左边缘接触左其包含块的边缘，右边缘触及其包含块的右边缘。但是，浮动框可能会出现在包含块边缘和线框边缘之间。因此，尽管在相同的行内格式化内容行框通常具有相同的宽度（即包含块的），它们可以在宽度上如果可用的水平空间减少由于浮子

变化有also a section devoted to "next to floats."

本质上，块级元素创建一个新的块上下文，将浮点推到下一行。 inline元素不会创建新的块上下文，因此浮点数可以存在于同一行上。请注意，如果两个元素都有空间，则只有这种情况：http://jsfiddle.net/YVW6Y/3/

来源

2013-04-16 11:20:32

内联格式是文本通常获得的内容。这意味着，非正式地说，事情被填充成线。

float是一个在当前行上左移或右移的框。一个浮动的最有趣的特点是内容可能沿着它的侧面流动。

所以浮点数是一种第三类格式化模型。它与inline相关，是非正式放置的布局模型。

来源

2013-04-16 11:13:26

困惑显示：内联和浮动：左

回答

相关问题