取代明確：兩者都與僞類

以前，當我有浮動塊，我會停止浮動，我用;取代明確：兩者都與僞類

<div style="clear:both"></div>

但現在，我解決了這個問題，僞類：

.last_floating_div:after { 
content: ""; 
display: table; 
clear: both; 
}

我總是完美的作品。但今天......這不起作用......！看看這個清晰的例子：http://jsfiddle.net/YsueS/2/

我知道我的問題是一個總的初學者問題。我多次賣掉這個問題......我真的不明白爲什麼它在這裏不起作用！

非常感謝大家！

來源

2013-10-31 Damien

這是你想要的嗎？ http://jsfiddle.net/YsueS/3/ –

謝謝喬希，結果是完美的！在這種情況下，JoshC的解決方案似乎更輕量化，但我保留解決方案以滿足更多需求:) – Damien

沒問題！溢出是實現此目的最基本和最廣泛使用的方式。我相信你也可以使用'overflow：auto'作爲絕對元素。 –

當然 - 您可以通過:after clearfix清除它，但是最優化的輕量級解決方案只需要在父級上設置overflow:hidden，以少得多的編碼就能達到預期的效果。

#mention { 
    overflow: hidden; 
}

jsFiddle here

要回答這個問題直接雖然，你應該已經應用了:after clearfix到#mentions - 父母，而不是孩子.. jsFiddle here它的工作原理。

來源

2013-10-31 19:42:36

'overflow：hidden;'對於較老的IE來說是最好的答案吧？ –

謝謝！你是對的，在這種情況下，溢出是真正輕量級比僞類:) – Damien

我想你需要一個#mention：做完你正在尋找的東西。

例如，

#mention:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
    } 
#mention { display: inline-block; } 

* html #mention{ height: 1%; } /* for older ie */ 
#mention { display: block; }

WORKING DEMO

希望這有助於。

來源

2013-10-31 19:43:11 Nitesh

phhew。黑客... – Jawad

沒有。真正的跨瀏覽器兼容性的答案:) - @Jawad – Nitesh

好的。 +1比。上衣。 – Jawad

如果您只需將:after添加到ID mention即可獲得理想的效果。

#mention:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

JSFIDDLE

來源

2013-10-31 19:44:09

取代明確：兩者都與僞類

回答

相關問題