Topテクニックメモスタイルシートネタ > floatの解除の仕方

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;
}


/*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で背景を綺麗に表示させたいときに使う。

「floatの解除の仕方」関連本

Akasa Rira
みつけたきせき