例えば、親要素<div>の子要素を2カラムなどにして、しかもそれらに段差がある場合、全てを親要素内に収めるようにするのに、clearfixという良い方法があると聞き、やってみたのですが、上手く行きません。


このように記述しています。

.clearfix:after {
content: "."; /* 新しい要素を作る */
display: block; /* ブロックレベル要素に */
clear: both;
height: 0;
visibility: hidden;
}

.clearfix {
display: inline-block;
}

* html .clearfix {
height: 1%;
/*\*//*/
height: auto;
overflow: hidden;
/**/
}

それを、<div id="songInfo" class="clearfix">などのようにしているのですが、
どうも本に書いてあるようにならないのです。

clearfixを指定する際に、親要素にfloat指定をしなければいけないのでしょうか?
正しいclearfixの使い方、使う際の注意などを教えて下さい!!

回答の条件
  • 1人3回まで
  • 登録:2008/01/15 20:18:26
  • 終了:2008/01/22 20:20:02

回答(2件)

id:tsukis No.1

tsukis回答回数15ベストアンサー獲得回数22008/01/15 20:42:14

ポイント35pt

id="songInfo"は親要素ですか?それとも子要素ですか?

clearfixは親要素につける必要があります。

親要素へのfloatも必要ありません。

id:tatami575

id="songInfo"は親要素です。


<div id="songInfo" class="clearfix">
    <ul id="songwriter">
      <li>作詞:あ</li>
      <li>作曲:い</li>
      <li>編曲:う</li>
    </ul>  
    <div id="songPlayBtn">
    <a href="#" class="songPlayBtn01">歌を聞く</a>
    </div>
    </div>

のような感じにすると、id="songPlayBtn"がボックスの外に

飛び出てしまう感じなのです。

id="songwriter"を左に、id="songPlayBtn"を右にフロートさせると、

ボックス内に収まるのですが、それをしなくてもボックスに入るのが、

clearfixのような気がするのですが、、、

2008/01/15 20:59:07
id:yoneto164 No.2

ヨネちゃん回答回数809ベストアンサー獲得回数942008/01/15 21:25:53

ポイント35pt

songwriter は ul に適応するのではなく、その外側に div を作って適応します。

http://acappella.cc/test/clearfix/

id:tatami575

ははーーー。なるほど~。

これは、ulにidを与えるのでなく、

divにidを与えてないと、

clearfixが適応されないということでしょうか??

うーむ。clearfixってムズかしい。。。

2008/01/16 00:32:31
  • id:tsukis
    id="songwriter"を左に、id="songPlayBtn"を右にフロートさせると、ボックス内に収まるとのことですが、そうでない場合にそれぞれどのようなスタイルをかけているのでしょうか?

    それと、一応ご使用のブラウザもお伺いしてもよろしいでしょうか?
  • id:tatami575
    #songInfo {
    display: block;
    width: 653px;
    height: 150px;
    }
    #songwriter {
    list-style: none;
    float: left;
    }

    #songPlayBtn {
    float: right;
    height: 100px;
    width: 100px;
    margin-right: 20px;
    margin-top: 10px;
    }

    こんな感じで書いています。フロートさせない場合は、
    float: left;などを省いているだけです。

    あと、ブラウザはfirefoxで見ています。ただし、IEに変えると、
    とんでもない崩れ方をする時があります。。。はあ。。。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません