web-dev-qa-db-ja.com

.clearfixクラスの使用方法は？

.clearfixクラスの概念を誤解していると思います。多分誰かが私を助けることができます。

マークアップを台無しにせずにfloatとclearを使用する方法を探しています。そこで、.clearfixを使用できると思いました。

空のH5BPプロジェクト内では、私のマークアップは次のようになります。

    <div></div>
    <div></div>
    <div class="clearfix"></div>
    <div></div>
    <div></div>
    <div class="clearfix"></div>
    <div></div>
    <div></div>
    <div class="clearfix"></div>

結果の下。しかし、私は三目並べを期待していました。誰かが私に言うことができます：

  1. どうすれば目標を達成でき、
  2. .clearfixクラスは実際に何に使用できますか？

csshtml5html5boilerplateboilerplate
8
kraftwer1

clearfixクラスは、すべての子がフローティングしているコンテナーで使用されます。これを使用しない場合、コンテナは高さを取得しません（IEを除く）。 http://complexspiral.com/publications/taining-floats/

あなたが求めているのはclearfixではなく、clearだけです。あなたはクラスを作ることができます
.clear { clear: both;}
そして、現在使用しているclearfixの代わりにそれを適用します。

clearfixについてもっと知りたい場合は、たくさんの情報があります。
クリアフィックスとは何ですか？

clearfixとclearの使用法を示す小さな例を設定しました： http://jsfiddle.net/hjXMG/1

21
Pevara
  • Clearfixが追加されましたaroundフローティングブロック
  • Clearが追加されましたafterフローティングブロック
5
FelipeAls