はclear：を両方とも擬似クラスに置き換えます

Question

以前は、浮動小数点ブロックがあったときにフロートを停止します。

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

しかし、今、私は擬似クラスで、この問題を解決するよ：

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

私は常に完璧に動作しました。しかし、今日...それは動作しません...！ この明確な例を見てください：http://jsfiddle.net/YsueS/2/

私は自分の問題が総初心者の問題であることを知っています。私はこの問題を何度も売りました...なぜここではうまくいかないのか分かりません！

多くの皆さんありがとうございます！

Answer 1

確かに、:after clearfixでクリアすることができますが、最も最適で軽量な解決策は、ほんの少しのコーディングで目的の効果が得られるように、overflow:hiddenを親に設定することです。

#mention { 
    overflow: hidden; 
} 

jsFiddle here

、あなたが#mentionsに:after clearfixを適用している必要があるものの、直接の質問に答えるために - ではなく、子の親を.. jsFiddle hereそれが動作します。

Answer 2

あなたは#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

この情報がお役に立てば幸いです。

Answer 3

:afterをID mentionに追加するだけで、目的の効果が得られます。

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

JSFIDDLE