floatの解除の仕方
floatを解除するのに、「clear:both;」を指定するのが一般的です。
でも「clear:both;」を指定するためにdivタグを追加するのが嫌だ…という場合は、「セレクタ:after」が便利です。
<div id="wrap">
<div id="right">右側</div>
<div id="left">左側</div>
</div>
#wrap {
width:700px;
}
#right {
float:right;
width:500px;
}
#left {
float:left;
width:200px;
}
width:700px;
}
#right {
float:right;
width:500px;
}
#left {
float:left;
width:200px;
}
/*flat解除用*/
#wrap:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
/*\*//*/
#wrap {
display:inline-block;
}
/**/
/* \*/
* html #wrap {
height:1%;
}
/* */
#wrap {
display:block;
}
※floatを解除するのに必要なハック詳細※
IE以外、セレクタの後にfloatを解除
セレクタ:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
/* \*//*/
MacIEにのみ適用させるスタイルを記述
/**/
/* \*/
* html WINIEのみ適用させるスタイルを記述
/* */
※display:inline-block; は、clearを指定したボックスの内側上部に隙間が空くのを防ぐ
※height:100%はwinIEで背景を綺麗に表示させたいときに使う。