html - Twitter Bootstrap clear float CSS 问题——我做错了什么？

Question

作为学习 CSS 的一部分(以及实际应用它——通过创建简单的主题)，今天我想知道 some proper ways清除 CSS 中的 float 。

我想看看 Twitter 是如何做到的，所以我下载了 Bootstrap，浏览了 bootstrap.css 文件，找到了我要找的东西(我找到了两个代码块):

.clearfix {
    *zoom: 1;
}
.clearfix:before, .clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both;
}

&

.container {
    margin-left: auto;
    margin-right: auto;
    *zoom: 1;
}
.container:before, .container:after {
    display: table;
    content: "";
}
.container:after {
    clear: both;
}

我立即尝试了一下，我的代码的特定部分如下所示:

<p class="sample-preview">
    <span class="sample-preview">PREVIEW</span>
    <em>This is italicized aka emphasized</em>, and so is <em>this</em>.<br />
    <strong>This is bold aka strong emphasis</strong>, and so is <strong>this</strong>.<br />
    Use <strong><em>italics and bold together</em></strong> if you <strong><em>have to</em></strong>.
</p>

+

p.sample-preview {
    border: 1px solid #FFCCC9;
    background: #FFEBE9;
    outline: 2px solid #FFEBE9;
    padding: 10px;
}

span.sample-preview {
    display: inline-block;
    float: right;
    margin:0;
    font-weight: bold;
    font-size: 12px;
    background: #FFCCC9;
    padding: 2px 5px;

}

.sample-preview {
    margin-left: auto;
    margin-right: auto;
    *zoom: 1;
}
.sample-preview:before, .sample-preview:after {
    display: table;
    content: "";
}
.sample-preview:after {
    clear: both;
}

虽然我不完全确定，但我认为这段代码在我尝试过的页面上导致了一个奇怪的错误。为什么我这么认为？当我使用 Firebug 从代码中删除 display: table; 时，一切似乎都很好。

可以看一下页面here错误是——第一个粉红色框比内容高。我做错了什么？

Answer 1

问题是您还清除了右侧的 float 菜单。

有两种解决方案:

• 通常是将您的内容区域本身 float 到左侧。这意味着其中的所有内容都处于不同的 float 上下文中。您的清除只会影响其中的元素。

• 另一个有效的技巧是在示例预览段落中指定 overflow: hidden。这可能更容易做到。在元素上指定 overflow 属性(但未设置为 visible)会导致其行为类似于 float 容器。

出厂价:http://www.brunildo.org/test/clear.html , http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow

我还应该注意到，使用这个溢出技巧，您根本不需要 clearfix。