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