cssFloat

浮動、'float' 特性 (CSS)

[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 6Firefox 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>

leftright の合わせ技。

[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>