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