[12] [DFN[[RUBYB[浮動]@en[float]]]] ([DFN[[RUBYB[浮動箱]@en[floated box]]]]) は、[RUBYB[[[現在行]]]@en[current line]]の[[左]]や[[右]]に[RUBYB[ずらされた]@en[shifted]][[箱]]です [SRC[>>14]]。 * 仕様書 - [13] [[CSS 2.1]] -- [14] * レンダリング ** 水平位置 [15] [[浮動箱]]は、[[包含ブロック]]の[[辺]] [WEAK[([RUBYB[[[詰め辺]]]@en[[[padding edge]]]]のことでいいのかな?)]] か、または他の[[浮動箱]]の[RUBYB[[[外辺]]]@en[[[outer edge]]]]に接するまで[[左]]または[[右]]にずらされてレンダリングされます [SRC[>>14]]。 ** 垂直位置 [16] [[行箱]]があれば、[RUBYB[現在]@en[current]]の[[行箱]]の[RUBYB[上]@en[top]]と[[浮動箱]]の[RUBYB[上]@en[top]]が揃えられます [SRC[>>14]]。 [17] ただし十分な[[横幅]]がなければ、[[横幅]]が十分になるまで、または他に[[浮動箱]]がなくなるまで、 下方向にずらされます [SRC[>>14]]。 ** 他の箱との関係 [18] [[浮動]]は[[フロー]]外にあるため、前後の普通の[[ブロック箱]]は[[浮動箱]]がない場合と同じように配置されます。 [SRC[>>14]] [19] [[浮動]]の次に作られる[[行箱]]は、[[浮動]]の[[余白箱]]が入るのに十分なだけの場所を確保するために短くなります。 ただし、短くすることによって[[行箱]]の中に何も入らなくなってしまうような場合には、 [[横幅]]が十分になるまで、または[[浮動箱]]がなくなるまで、下方向にずらされます。 [SRC[>>14]] [20] [RUBYB[[[現在行]]]@en[current line]]にあって[[浮動]]より前にあった[[内容]]は、 [[浮動]]の反対側の最初の[[行]]に[RUBYB[再配置]@en[reflow]]されます。 [SRC[>>14]] * 実装 - [1] ''417024 - CE: H/PC 2000 では、Cascade Style Sheet の float が動作しない'' : 普通 [CODE(CSS)[float]] は動作しないもんだと思いますが:) というか [[PocketIE]] って [[CSS]] に対応していたんだ。 [2] ,[CODE(CSS)@en[[[aligncenter]]]] , ,非標準 ,[[ROBOHelp]] ,[CODE(CSS)@en[[[prince-bottom-if-necessary]]]] , , ,[[Prince]] ,[CODE(CSS)@en[[[prince-column-bottom]]]] , , ,[[Prince]] ,[CODE(CSS)@en[[[prince-column-bottom-if-necessary]]]] , , ,[[Prince]] ,[CODE(CSS)@en[[[prince-column-top]]]] , , ,[[Prince]] ,[CODE(CSS)@en[[[prince-column-top-if-necessary]]]] , , ,[[Prince]] ,[CODE(CSS)@en[[[prince-top-if-necessary]]]] , , ,[[Prince]] [3] [CITE[インライン要素に挟まれているフロートが下にずれて置かれる]] [[行内水準箱]]間に挟まった[[浮動箱]]の上辺は、 その直前の[[行箱]]の上辺に揃えなければならないが、 [[WinIE 6]] と [[Firefox 1]] は次の[[行箱]]が来るであろう場所に揃えられる。 [[Opera 8]] は正常。 ([[名無しさん]] [WEAK[2005-11-05 12:19:35 +00:00]]) [4] [CITE[Prince: Download Alpha 2007-04-13]] ([CODE[2007-04-15 15:39:43 +09:00]] 版) [5] [CITE[CSS Float Theory: Things You Should Know | Smashing Magazine]] ([CODE[2007-05-05 11:30:48 +09:00]] 版) ([[名無しさん]] [WEAK[2007-05-05 02:34:36 +00:00]]) [7] [CITE@ja[float プロパティを使用する場合はその要素の幅の明示が必要 - double-team.org]] ([CODE[2007-07-17 14:14:15 +09:00]] 版) ([[名無しさん]]) [8] [CITE@ja[Re: float プロパティを使用する場合はその要素の幅の明示が必要 - double-team.org]] ([TIME[2007-07-21 02:08:50 +09:00]] 版) [9] [CITE@ja[float の下に食い込まない見出し | ヨモツネット]] ([TIME[2009-01-27 13:22:43 +09:00]] 版) [10] [CITE@ja['''['''CSS''']'''フロートしたナビゲーションを中央に配置するスタイルシート | コリス]] ([TIME[2009-02-08 17:31:24 +09:00]] 版) [CODE(CSS)@en[[[left]]]] と [CODE(CSS)@en[[[right]]]] の合わせ技。 [11] [CITE@ja[IE6 で文章の最後の2文字(くらい)が変なところに表示されてしまう問題の原因と解決法。 | btmup Blog]] ([[btmup Blog]] 著, [TIME[2009-03-15 20:33:36 +09:00]] 版)