html - 对 display:inline 和 float:left 感到困惑

Question

假设我有两个元素：

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

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

元素在spanfloat元素之后：<a href="http://jsfiddle.net/YVW6Y/1/" rel="nofollow">demo

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

score 2 · Accepted Answer

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

至于内联元素

一般来说，线框的左边缘接触其包含块的左边缘，而右边缘接触其包含块的右边缘。但是，浮动框可能会出现在包含块边缘和行框边缘之间。因此，尽管在同一行内格式化上下文中的行框通常具有相同的宽度（包含块的宽度），但如果可用的水平空间因浮动而减少，它们的宽度可能会有所不同

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

score 0 · Accepted Answer

内联格式是文本通常得到的。非正式地，这意味着事物被填充成行。

浮点数是在当前行向左或向右移动的框。浮动最有趣的特征是内容可以沿着它的一侧流动。

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

2 回答 2