内联元素和浮动未按预期运行答案

【问题标题】：Inline element and float not behaving as expected内联元素和浮动未按预期运行
【发布时间】：2012-10-03 06:14:29
【问题描述】：

我正在尝试彻底了解浏览器的行为，目前特别浮动。

使用以下简单代码，我希望 div 浮动到文本的左侧：

<span>Some span (inline) text</span>
<div class='a'>Floated div</div>

使用以下 css：

div.a {
    background-color: red;
    width:100px;
    float:left;
}

在大多数浏览器上，它符合我的预期，但在 IE7 上，span 文本出现在一行上，浮动 div 出现在下一行 - 请参阅以下 jsfiddle：http://jsfiddle.net/FtYYZ/

有人可以解释一下浏览器布局方面发生了什么吗？我的理解是“浮动元素从正常流程中取出并放置在左侧或右侧”。我原以为没有什么会从第一行的末尾采取正常的流程，所以浮动应该保持在那一行，就像大多数浏览器一样。 IE行为背后的逻辑是什么？

感谢您的帮助！

【问题讨论】：

标签： css internet-explorer css-float

【解决方案1】：

说实话，IE 7 只占浏览器份额的 1%。

为了处理这个问题，我会将以下内容放在你的 body 元素中。

  <!--[if lt IE 8]>
        <p class="chromeframe">You are using an <strong>outdated</strong> browser. 
 Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a   
href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a>
 to improve your experience.</p>
    <![endif]-->

无需鼓励使用 IE 7。

【讨论】：