HTML/clearfix のバックアップ(No.1) - yanor.net/wiki

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
HTML/clearfix へ行く。
- 1 (2010-01-04 (月) 11:55:21)

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が意図した位置に表示される。