概述

CSS选择器

在IE6及更低版本中，当一个浮动元素与一个非浮动元素相邻时，在非浮动元素中，会莫名的为靠近浮动元素的内容添加 3 像素的间隙。

假设在一个容器中，有两个元素：

<div id="wrapper">
    <div class="fl">float</div>
    <p>...</p>
</div>

左侧的 div 元素向左浮动，而右侧的 p 元素不浮动：

.fl {
   float: left;
   width: 100px;
   height: 60px;
}

在IE6中，就会发现在非浮动元素中的文本和浮动元素之间，莫名其妙会出现 3px 的间隙，一旦浮动停止，3px 的间隙就会消失。如图 10‑4 所示：

由于这个间隙很小，在文本环绕浮动元素时，很难被注意到。但是，如果为 p 元素设置一个与浮动元素宽度相等的左外边距，则在浮动停止的时候，3px 的间隙就会消失，可以看到文本会突然出现一个台阶。如图 10‑5 所示：

当然，如果这个Bug不影响布局，完全可以让它随风而去。但是，如果影响了布局，或者你不能容忍一点点瑕疵的话，就得想办法消除这 3px 的间隙。

如果希望段落文本环绕浮动元素，只需要使用IE hack，将浮动元素的右边距向左缩进 3 个像素，便可轻松解决问题。

.fl {
   float: left;
   width: 100px;
   height: 60px;
   _margin-right: -3px;
}

如果不希望段落文本环绕浮动元素，就可以通过任何一种方式，让 p 元素触发布局。触发布局的方法很多，最常用的莫过于 _zoom: 1 了。触发布局后，p 元素便会独立布局，3px 的间隙自然就消失了。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

如果本教程对您帮助很大，请随意打赏。您的支持，将鼓励我写出更好的教程！

« 上一节← 键盘方向键翻页 →下一节 »