[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]] *** 浮動によってブロック箱がずらされるケース [21] [[表]]、[[ブロック水準置換要素]]、新しい[[ブロック書式付け文脈]]を[[確立]]する[[通常フロー]]の[[要素]]は、 同じ[[ブロック書式付け文脈]]に属する[[浮動]]と重なっては[['''なりません''']]。 必要があれば前の[[浮動]]よりも下に配置する[['''べきです''']]が、 十分な場所があれば[[浮動]]の隣に配置しても[['''構いません''']]。 いつ隣に配置してもよいか、どれだけ狭くしてもよいかは [[CSS2]] では未定義です。 [SRC[>>14]] ** 余白 [22] [[浮動]]の[[余白]]は [[collapse]] されません。 [SRC[>>14]] ** スタック付け [23] [[浮動]]の[[内容]]は新しい[[スタック付け文脈]]が生成されたかのように[[スタック]]されます。 ただし、[RUBYB[[[被位置付け要素]]]@en[positioned element]]や本当に新しく[[スタック付け文脈]]を作る[[要素]]は、 [[浮動]]ではなく[[浮動]]の[[親スタック付け文脈]]に属します。 [SRC[>>14]] [24] [[浮動]]は[[通常フロー]]の他の[[箱]]と[RUBYB[重なる]@en[overlay]]ことがあります。 その時、[[浮動]]は[[位置付け]]されていない[RUBYB[[[フロー中]]]@en[in-flow]]の[[ブロック]]よりは前で[[フロー中]]の[[行内]]のものよりは後ろに[[レンダリング]]されます。 [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]] 版) [25] [CITE[''''''[''''''whatwg'''''']'''''' Discrepancies between HTML and ES rules for parsing an integer or float]] ( ([TIME[2011-08-04 23:37:26 +09:00]] 版)) [26] [CITE[CSS Print Profile]] ( ([TIME[2013-03-14 20:50:03 +09:00]] 版)) [FIG(quote)[ [FIGCAPTION[ [6] [CITE[Opera Reader: Paging the Web]] ([TIME[2015-07-28 11:58:47 +09:00]] 版) ]FIGCAPTION] > The float property supports the following new values: > -o-top/-o-bottom: float to the top/bottom of the natural column. > -o-top-corner/-o-bottom-corner: float to the top/bottom corner of last column. > -o-top-next-page/-o-bottom-next-page: float to the top/bottom of the first column of the next page. > -o-top-corner-next-page/-o-bottom-corner-next-page: float to the top/bottom of the last column of the next page. ]FIG] [27] [CITE@en[CSS Page Floats]] ( ([TIME[2015-09-15 04:10:30 +09:00]] 版)) [28] [CITE@en-US[float - CSS | MDN]] ([TIME[2016-02-10 22:23:10 +09:00]] 版) [29] [CITE@en[19988 – add a '''['''LenientFloat''']''' to mean "ignore IDL attribute assignment or method call if a non-finite float is passed"]] ([TIME[2016-10-26 15:52:01 +09:00]]) [30] [CITE@en[Clarify that unrestricted doubles and floats include NaNs. (#393)]] ([[tobie]]著, [TIME[2017-07-30 21:58:17 +09:00]]) [31] [CITE@en['''['''css-transitions''']''' Change TransitionEvent elapsedTime from 'float' to …]] ([[stephenmcgruer]]著, [TIME[2018-05-14 08:20:33 +09:00]]) [32] [CITE@en['''['''css-transitions''']''' Change TransitionEvent elapsedTime from 'float' to … by stephenmcgruer · Pull Request #2671 · w3c/csswg-drafts]] ([TIME[2018-05-14 12:15:30 +09:00]])