如何获得内联块为浮动腾出空间？答案

【问题标题】：How to get inline-blocks to make space for floats?如何获得内联块为浮动腾出空间？
【发布时间】：2016-03-25 03:32:57
【问题描述】：

我有一个包含浮动元素的 inline-block 元素，以及一些围绕它流动的文本：

<div style="background: yellow; display: inline-block">
  <div style="float: left; width: 128px; height: 128px; background: cyan">Float</div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br><br>
  Vivamus blandit porta rhoncus.<br><br>
  Integer egestas, lectus ac finibus sagittis, nisl diam scelerisque risus, id malesuada odio tortor in elit.<br><br>
  Sed pellentesque ligula enim, at porta nibh viverra quis.<br><br>
  Integer egestas, lectus ac finibus sagittis, nisl diam scelerisque risus, id malesuada odio tortor in elit.
</div>

在 Internet Explorer 上，这会按预期呈现： Firefox 和 Chrome 以不同的方式呈现相同的 HTML：

注意在 Firefox 渲染中，inline-block 的宽度是这样的，它精确地适合文本没有浮动。这会导致添加浮动后不适合的行不必要地中断。

看起来 Firefox 和 Chrome 通过首先 (1) 计算 inline-block 的首选宽度，就好像浮动不存在一样，(2) 添加浮动，以及 (3) 布置在使用 (1) 中计算的宽度作为 inline-block 的宽度时，在浮动周围流动文本。

我想要的行为是Internet Explorer实现的行为。有什么办法可以在其他浏览器如火狐、Chrome等中达到同样的效果？

【问题讨论】：

永远，永远不要使用 IE 作为工作方式的参考。第一个问题，您使用的是哪种类型的文档类型？
@Rob：我没有将 IE 用作应该工作方式的参考，我将其用作我想要的示例> 要做的事情。我很确定 CSS 规范没有指定这个细节，允许这两种行为。这是使用 html5 文档类型的 IE11。
没有。 CSS 不这样做。我的评论只是为了确保您知道任何版本的 IE 都不能被信任来正确地做很多事情。
@Rob：在 CSS 2.2 规范的第 10.3.5 节中描述了缩小以适应宽度，“CSS 2.2 没有定义确切的算法。”
字体大小一样吗？它们在图像中看起来不一样。检查开发工具

标签： html css cross-browser css-float

【解决方案1】：

我认为您应该为文本指定特定的字体大小，否则它将采用浏览器中设置的默认大小，这可能会有所不同。还要给 wrapper 元素一些宽度，以便文本流在所有情况下获得相同的空间量。

【讨论】：

我不希望内联块在两个浏览器中具有相同的空间量。我希望他们有足够的空间来容纳文本，如果可能的话不要换行。