未浮动块意外清除 IE6/IE7 中的浮动块答案

【问题标题】：Unfloated block unexpectedly clears floated block in IE6/IE7未浮动块意外清除 IE6/IE7 中的浮动块
【发布时间】：2020-07-09 17:36:16
【问题描述】：

我一直在寻找 Internet Explorer 错误列表，但没有看到与此行为相对应的错误列表。这是一个已知问题吗？如果是这样，它叫什么，有没有办法修复它？

问题：当我向左浮动块时，右侧未浮动的块（即仍在“流”中）意外地向下移动以清除浮动块。我只在 IE6 和 IE7 中看到问题。

在本例中，第 5 段应紧接在第 3 段下方和第 2 段右侧。相反，它会向下移动以清除第 2 段。

截图：http://prentissriddle.com/tmp/tmp-float.gif

代码：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
p { border: 1px solid #000; font-family: sans-serif; }
</style>
</head>
<body>
<p>Paragraph 1: unfloated.</p>
<p style="float: left; clear: left; width: 150px;">Paragraph 2: floats left. a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
<p>Paragraph 3: unfloated.</p>
<p style="float: left; clear: left; width: 150px;">Paragraph 4: floats left. a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
<p>Paragraph 5: unfloated.</p>
</body>
</html>

这是一个已知的错误吗？有解决办法吗？谢谢。

【问题讨论】：

您是否尝试过为非浮动段落应用宽度？
本，谢谢你的建议。我刚试了一下，未浮动段落的垂直间距没有区别。

标签： css css-float internet-explorer-7 internet-explorer-6

【解决方案1】：

IE6 / 7 浮动错误是最好避免的噩梦。除了依靠 clear: left 和 floated 元素之外，还有什么方法可以使用技术实现您想要的布局？我使用我能想到的所有 IE 浮动修复技巧测试了您的代码（缩放：1，高度：1％，显式设置宽度，左侧边距：在非浮动块上，各种显示：设置，Position Is Everything 的常用建议...），但找不到可以使 IE6/7 垂直对齐的东西。好痛啊！

我知道这可能是高度简化的虚拟代码，但我确实发现，如果您切换源顺序并为所有段落指定一致的边距 + 填充，您可以使事情看起来一致：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <style type="text/css">
        p { border: 1px solid #000; font-family: sans-serif; margin: 0; padding: 0; }
    </style>
</head>
<body>
    <p>Paragraph 1: unfloated.</p>
    <p style="float: left; clear: left; width: 150px;">Paragraph 2: floats left. a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
    <p>Paragraph 3: unfloated.</p>
    <p>Paragraph 5: unfloated.</p>
    <p style="float: left; clear: left; width: 150px;">Paragraph 4: floats left. a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</body>
</html>

【讨论】：

谢谢，亚当。至少现在我知道我没有疯。我想到的用例不会让我打乱块的顺序：我想让 Wordpress 用户创建拉引号，这些引号会向左浮动到一个空白的侧边栏中（可能使用像 [pullquote] [/pullquote] 这样的短代码）。他们希望按照自然顺序撰写文本。
我已经不得不解决另一个 Explorer 错误才能做到这一点：如果负边距不小于浮动对象，IE6/IE7 就会爆炸。解决方法是作弊一个像素，希望没有人注意到。 :-(
啊，我明白了。只是为了扮演魔鬼的拥护者，如果您要在源顺序中将拉引号放在第一位，它可能会简化大多数浮动问题。这种用法的一个很好的例子可能是 Liz Danzico 的 Bobulate 博客的旁注 (bobulate.com/post/5013829096/the-social-life-of-marginalia)——它们只是 div 向左浮动，设置宽度为 160 像素，页面的段落都有左边距：180 像素，以及至少 IE7 看起来很酷。
亚当，给猫剥皮的方法有很多。 Bobulate 通过在非浮动段落上放置一个大的正左边距来避免在拉引号上放置一个负左边距。我的偏好是将主要内容包装在
中并对其应用边距，而不是试图预测可能出现在其中的每一种项目并给它们自己的全部左边距。从理论上讲，这似乎是更强大的解决方案。但我猜 IE 告诉我我的偏好无关紧要。

【解决方案2】：

我在这个网站上找到了一个“答案”（至少对于 IE7，我无法测试 IE6）：http://www.brunildo.org/test/IEWfc2.html（案例 4 解决了您的情况，案例 2）。我说“答案”，因为它确实需要一些额外的 html 代码和 css，否则毫无价值。如果有办法检测浏览器并仅在需要时输入，那可能是最好的。关键是在包含float 和clear 的元素之前引入另一个浮动元素。这是您的代码的修改版本：

HTML

<p>Paragraph 1: unfloated.</p>
<p class="floated">Paragraph 2: floats left. a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
<p>Paragraph 3: unfloated.</p><span class="floatFix"></span>
<p class="floated">Paragraph 4: floats left. a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
<p>Paragraph 5: unfloated.</p><span class="floatFix"></span>

CSS

p { border: 1px solid #000; font-family: sans-serif; }
.floated {float: left; clear: left; width: 150px;}
.floatFix {float: left; width: 0; height: 0; margin: 0; padding: 0;}

【讨论】：