- TOP
- HTML / CSS Web
- ［CSSによる回り込みfloat解除］ clearfix メモ
cssでfloat属性を利用し、回り込みをしている時のfloat解除用のクラス clearfixをメモしておきます。
制作しているサイト毎にclearfixの細かい部分が全て異なっているので、この際に統一しようかと思いました。サイトのソースを短くするためにも、clearfixのクラス名は短くした方が良いと思われます。
追加するソース
CSS
/* Clearfix */
.clearfix:after {
content: ".";
display: block;
height: 0.1px;
clear: both;
visibility: hidden;
font-size: 0.1em;
line-height: 0;
}
.clearfix {
display: inline-block
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-Mac */
(x)HTML
これは回り込み、float解除の為のClearFixの記述方法です。 yoはこのClearFixで回り込みを解除しています。
以上です。
補足
上記の方法はMovableTypeで利用されているものと同じです。font-sizeやline-heightの設定プロパティはいらないかもしれません。
« 横スクロールすると背景が切れるときの対処法 | ホーム | jQueryを使ってクッキーを操作 »
http://pulltab.info/mt/mt-tb.cgi/52
