[12] 浮動float (浮動箱floated box) は、現在行current lineの左や右にずらされたshifted箱です >>14。

仕様書

レンダリング

水平位置

[15] 浮動箱は、包含ブロックの辺 (詰め辺padding edgeのことでいいのかな?) か、または他の浮動箱の外辺outer edgeに接するまで左または右にずらされてレンダリングされます >>14。

垂直位置

[16] 行箱があれば、現在currentの行箱の上topと浮動箱の上topが揃えられます >>14。

[17] ただし十分な横幅がなければ、横幅が十分になるまで、または他に浮動箱がなくなるまで、 下方向にずらされます >>14。

前後の箱の配置

浮動によって行箱が狭くなるケース

[18] 浮動はフロー外にあるため、前後の普通のブロック箱は、垂直方向には、 浮動箱がない場合と同じように配置されます。>>14

[19] 浮動の次に作られる行箱は、浮動の余白箱が入るのに十分なだけの場所を確保するために短くなります。 ただし、短くすることによって行箱の中に何も入らなくなってしまうような場合には、 横幅が十分になるまで、または浮動箱がなくなるまで、下方向にずらされます。 >>14

[20] 現在行current lineにあって浮動より前にあった内容は、 浮動の反対側の最初の行に再配置reflowされます。 >>14

浮動によってブロック箱がずらされるケース

[21] 表、ブロック水準置換要素、新しいブロック書式付け文脈を確立する通常フローの要素は、 同じブロック書式付け文脈に属する浮動と重なってはなりません。 必要があれば前の浮動よりも下に配置するべきですが、 十分な場所があれば浮動の隣に配置しても構いません。 いつ隣に配置してもよいか、どれだけ狭くしてもよいかは CSS2 では未定義です。 >>14

余白

[22] 浮動の余白は collapse されません。 >>14

スタック付け

[23] 浮動の内容は新しいスタック付け文脈が生成されたかのようにスタックされます。 ただし、被位置付け要素positioned elementや本当に新しくスタック付け文脈を作る要素は、 浮動ではなく浮動の親スタック付け文脈に属します。 >>14

[24] 浮動は通常フローの他の箱と重なるoverlayことがあります。 その時、浮動は位置付けされていないフロー中in-flowのブロックよりは前でフロー中の行内のものよりは後ろにレンダリングされます。 >>14

実装

[2]
aligncenter非標準ROBOHelp
prince-bottom-if-necessaryPrince
prince-column-bottomPrince
prince-column-bottom-if-necessaryPrince
prince-column-topPrince
prince-column-top-if-necessaryPrince
prince-top-if-necessaryPrince

[3] インライン要素に挟まれているフロートが下にずれて置かれる http://cssbug.at.infoseek.co.jp/detail/winie/b113.html

行内水準箱間に挟まった浮動箱の上辺は、 その直前の行箱の上辺に揃えなければならないが、 WinIE 6 と Firefox 1 は次の行箱が来るであろう場所に揃えられる。 Opera 8 は正常。 (名無しさん 2005-11-05 12:19:35 +00:00)

[4] Prince: Download Alpha 2007-04-13 (2007-04-15 15:39:43 +09:00 版) http://princexml.com/alpha/2007-04-13/

[5] CSS Float Theory: Things You Should Know | Smashing Magazine (2007-05-05 11:30:48 +09:00 版) http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/ (名無しさん 2007-05-05 02:34:36 +00:00)

[7] float プロパティを使用する場合はその要素の幅の明示が必要 - double-team.org (2007-07-17 14:14:15 +09:00 版) http://www.double-team.org/2007/07/13/000043/ (名無しさん)

[8] Re: float プロパティを使用する場合はその要素の幅の明示が必要 - double-team.org ( 版) http://www.double-team.org/2007/07/16/000044/

[9] float の下に食い込まない見出し | ヨモツネット ( 版) http://www.yomotsu.net/lab/css/layout_float-impervious

[10] [CSS]フロートしたナビゲーションを中央に配置するスタイルシート | コリス ( 版) http://coliss.com/articles/build-websites/operation/css/css-centering-float-navigation.html

left と right の合わせ技。

[11] IE6 で文章の最後の2文字(くらい)が変なところに表示されてしまう問題の原因と解決法。 | btmup Blog (btmup Blog 著, 版) http://blog.btmup.com/xhtml/ie6-final-letter-bug.html

[25] [whatwg] Discrepancies between HTML and ES rules for parsing an integer or float ( ( 版)) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-August/032792.html

[26] CSS Print Profile ( ( 版)) http://www.w3.org/TR/2013/NOTE-css-print-20130314/#s.8.1

[6] Opera Reader: Paging the Web ( 版) http://people.opera.com/howcome/2011/reader/#float

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.

[27] CSS Page Floats ( ( 版)) http://www.w3.org/TR/2015/WD-css-page-floats-3-20150915/

[28] float - CSS | MDN ( 版) https://developer.mozilla.org/en/docs/Web/CSS/float

[29] 19988 – add a [LenientFloat] to mean "ignore IDL attribute assignment or method call if a non-finite float is passed" () https://www.w3.org/Bugs/Public/show_bug.cgi?id=19988

[30] Clarify that unrestricted doubles and floats include NaNs. (#393) (tobie著, ) https://github.com/heycam/webidl/commit/44d0f24f4ef6632bf49dcf1650ff0d3c64778943

[31] [css-transitions] Change TransitionEvent elapsedTime from 'float' to … (stephenmcgruer著, ) https://github.com/w3c/csswg-drafts/commit/d00fb5d611284201a3259b1b8ae9b93aef6f9204

[32] [css-transitions] Change TransitionEvent elapsedTime from 'float' to … by stephenmcgruer · Pull Request #2671 · w3c/csswg-drafts () https://github.com/w3c/csswg-drafts/pull/2671