html - :after を使用して浮動要素をクリアする

Question

私にはリストがあり、li にはfloat:left;. の後のコンテンツは<ul>正しく配置されている必要があります。したがって、私は以下を構築できます：

http://jsfiddle.net/8unU8/

<div class="clear">:after のような疑似セレクターを使用して を削除できると思いました。

しかし、この例は機能していません:

http://jsfiddle.net/EyNnk/

フローティング要素をクリアするには、常に個別の div を作成する必要がありますか?

Answer 1

このように書いてください：

.wrapper:after {
    content: '';
    display: block;
    clear: both;
}

これをチェックしてくださいhttp://jsfiddle.net/EyNnk/1/

Answer 2

いいえ、次のようなことをするだけでは十分ではありません。

<ul class="clearfix">
  <li>one</li>
  <li>two></li>
</ul>

そして、次の CSS:

ul li {float: left;}


.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
   display: block;
}

* html .clearfix {
   height: 1%;
}

Answer 3

「dasda」というテキストがタグ内に含まれることはありませんよね？意味的に、そして有効なHTMLであるためには、それに明確なクラスを追加するだけです。

http://jsfiddle.net/EyNnk/2/

Answer 4

使用する

.wrapper:after {
    content : '\n';
}

Roko が提供するソリューションによく似ています。:after および :before 疑似を使用してコンテンツを挿入/変更できます。詳細については、 http://www.quirksmode.org/css/content.htmlを確認してください。