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

作为学习CSS的一部分（&实际应用它 - 通过创建简单主题），今天我想知道在CSS中清除浮动的some proper ways。Twitter的问题Bootstrap clear float CSS - 我做错了什么？

我想看到的Twitter是怎么做的，所以我下载引导，通过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，错误是 - 第一个粉红色框比内容高。我究竟做错了什么？

来源

2012-03-19 its_me

您应该使用无论是浮动还是显示：表格。选择一个和它一起使用，都会造成问题。， – Kyle 2012-03-19 12:26:15

@KyleSevenoaks我不明白。所以，在我的情况下是'display：table;'不必要？如果是这样，为什（你可以请尝试更清楚一点吗？） – 2012-03-19 12:28:21

嗯，这取决于你想要做什么。显示：表;有它的地位，如浮动。你想实现什么？ :) – Kyle 2012-03-19 12:33:14

问题是你也在清理浮动菜单的权利。

有针对两种解决方案：

通常是本身浮动的内容区域的左边。这意味着它里面的所有内容都在不同的浮点内容。你的明确只会影响它内部的元素。
另一个窍门是在示例预览段落中指定overflow: hidden。这可能更容易做到。指定元素上的overflow属性（但未设置为visible）会导致其表现得像浮动容器。

CFR：http://www.brunildo.org/test/clear.html，http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow

我也应该注意到，这个溢出招，你不需要clearfix可言。

来源

2012-03-19 12:38:56

优秀！那么，您是否意识到跨越浏览器的“overflow：hidden;”有任何问题？（IE7 +） – 2012-03-19 12:51:26

我使用'overflow：auto;'因为它更适合我。非常感谢链接。 – 2012-03-19 13:16:27

@badlearner：不，看起来非常安全。 – 2012-03-20 08:18:16

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

回答

相关问题