* clearfix [#kf368ea3]

*** HTML [#y3e6fb6f]
 <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 [#ebc84f15]
 #wrapper:after {
   content: ".";
   display: block;
   height: 0;
   visibility: hidden;
   clear: both;
  }
  #wrapper {
    zoom: 100%;
  }

- これで#wrapperが高さを持ち、testのdivが意図した位置に表示される。
- zoom: 100%はIE用。

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