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 - 我做錯了什麼？

回答

相關問題