浮动 div 未按预期在 IE 中清除

Question

我遇到了一个相当讨厌的错误，它似乎只发生在 Internet Explorer 上。我创建了一个 jsFiddle 来说明我的沮丧。

<div class="container" style="width: 802px;">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

即使前三个块的计算高度相同，第四个块也没有向左清除。有谁知道任何 solution/hack 吗？

我需要这个来处理最小高度，而不是高度，我不能使用 clear: left。

提前致谢，

伊恩

Answer 1

问题仅仅是因为前两个块比其他两个块高 1 个像素。

这会导致第 4 个块抓住第 2 个块的右边缘。

例如，如果您将 .block 的高度设置为 160 像素，您会看到它们按照您的预期进行换行。

如果浮动元素具有不相似的高度，这是一个常见问题。

注意： 行为似乎取决于浏览器的原因可能与不同浏览器的默认字体和字体大小有关。如果您要使用稍微小一点的字体，那么前两个块会稍微短一些，然后所有块的最小高度都是 155px，并且是相同的，所以问题不会显现出来。（在 .block 上设置 font-size: 0.75em，看看会发生什么！）

$('.block').each(function (i) {
    $('body').append('height of block' + i + ': ' + $(this).outerHeight() + '\n');
});

.container {
  width: 802px;
  border: 1px dotted blue;
  overflow: auto;
}
.block {
  float: left;
  width: 33.333%;
  background-color: #bbb;
  padding: 40px;
  border: 10px solid #fff;
  box-sizing: border-box;
  min-height: 155px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="block">Lorem ipsum dolor sit amet, consectetuer adipiscing eli.</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetuer adipiscin.</div>
  <div class="block">Lorel eum</div>
  <div class="block">Lorem ipsumdentur parum clari,um.</div>
</div>

浮动 div 未按预期在 IE 中清除

Floated divs not clearing as expected in IE

html

css

cross-browser