clearfix

HTML

<html>
  <body>
    <div id="wrapper">
      <div style="float:left;width:20%">
        menu1<br/>
        menu2<br/>
        menu3
      </div>
      <div>conetens</div>
    </div>
    <div>test</div>
  </body>
</html>
  • #wrapperの中のmenuなdivはfloatしているので、#wrapperには高さが出ない。
  • 従って、続く要素である、testのdivが意図する位置で表示されない。
  • これを回避するために#wrapperにclearfixを設定する。
  • (もしくはtestのdivにclear:bothを指定する。)

clearfix

#wrapper:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
 }
 #wrapper {
   zoom: 100%;
 }
  • これで#wrapperが高さを持ち、testのdivが意図した位置に表示される。
  • zoom: 100%はIE用。

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

Last-modified: 2010-01-04 (月) 11:55:50 (3626d)