Question

假设我有两个要素：

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

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

span元素位于float元素之后：demo

但我认为内联元素在标准流程中，所以它的位置不应该受浮子元件影响？为什么会这样？

Answer 1

在块格式化上下文中，每个框的左外边缘触及包含块的左边缘（从右到左格式化，右边缘触摸）。即使存在浮点数也是如此...除非该框建立了新的块格式化上下文

至于内联元素

通常，线框的左边缘接触其包含块的左边缘，右边缘接触其包含块的右边缘。但是，浮动框可能位于包含块边缘和线框边缘之间。因此，虽然相同内联格式化上下文中的线框通常具有相同的宽度（包含块的宽度），但如果由于浮动可用的水平空间减少，它们的宽度可能会有所不同

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

Answer 2

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

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

所以float是一种第三类格式化模型。它涉及内联作为非正式的布局模型。