1. TOP
  2. HTML / CSS Web
  3. [CSSによる回り込みfloat解除] clearfix メモ

[CSSによる回り込みfloat解除] clearfix メモ

カテゴリ:
HTML / CSS
Web
| トラックバック(0)
投稿者:yo yo

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
ページの先頭に戻る