Edit

Page

Page title:

Page body:

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

* 仕様書

- [13] [[CSS 2.1]]
-- [14] <http://www.w3.org/TR/CSS21/visuren.html#floats>

* レンダリング

** 水平位置

[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 が動作しない'' <http://support.microsoft.com/default.aspx?scid=kb;ja;417024>: 普通 [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[インライン要素に挟まれているフロートが下にずれて置かれる]] 
<http://cssbug.at.infoseek.co.jp/detail/winie/b113.html>

[[行内水準箱]]間に挟まった[[浮動箱]]の上辺は、
その直前の[[行箱]]の上辺に揃えなければならないが、
[[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]] 版) 
<http://princexml.com/alpha/2007-04-13/>

[5]
[CITE[CSS Float Theory: Things You Should Know | Smashing Magazine]] ([CODE[2007-05-05 11:30:48 +09:00]] 版) <http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/>
([[名無しさん]] [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]] 版) <http://www.double-team.org/2007/07/13/000043/>
([[名無しさん]])

[8]
[CITE@ja[Re: float プロパティを使用する場合はその要素の幅の明示が必要 - double-team.org]] ([TIME[2007-07-21 02:08:50 +09:00]] 版) <http://www.double-team.org/2007/07/16/000044/>

[9] [CITE@ja[float の下に食い込まない見出し | ヨモツネット]] ([TIME[2009-01-27 13:22:43 +09:00]] 版) <http://www.yomotsu.net/lab/css/layout_float-impervious>

[10] [CITE@ja['''['''CSS''']'''フロートしたナビゲーションを中央に配置するスタイルシート | コリス]] ([TIME[2009-02-08 17:31:24 +09:00]] 版) <http://coliss.com/articles/build-websites/operation/css/css-centering-float-navigation.html>

[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]] 版) <http://blog.btmup.com/xhtml/ie6-final-letter-bug.html>

[25] [CITE[''''''[''''''whatwg'''''']'''''' Discrepancies between HTML and ES rules for parsing an integer or float]]
( ([TIME[2011-08-04 23:37:26 +09:00]] 版))
<http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-August/032792.html>

[26] [CITE[CSS Print Profile]]
( ([TIME[2013-03-14 20:50:03 +09:00]] 版))
<http://www.w3.org/TR/2013/NOTE-css-print-20130314/#s.8.1>

[FIG(quote)[
[FIGCAPTION[
[6] [CITE[Opera Reader: Paging the Web]]
([TIME[2015-07-28 11:58:47 +09:00]] 版)
<http://people.opera.com/howcome/2011/reader/#float>
]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]] 版))
<http://www.w3.org/TR/2015/WD-css-page-floats-3-20150915/>

[28] [CITE@en-US[float - CSS | MDN]] ([TIME[2016-02-10 22:23:10 +09:00]] 版) <https://developer.mozilla.org/en/docs/Web/CSS/float>

[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]])
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=19988>

[30] [CITE@en[Clarify that unrestricted doubles and floats include NaNs. (#393)]]
([[tobie]]著, [TIME[2017-07-30 21:58:17 +09:00]])
<https://github.com/heycam/webidl/commit/44d0f24f4ef6632bf49dcf1650ff0d3c64778943>

[31] [CITE@en['''['''css-transitions''']''' Change TransitionEvent elapsedTime from 'float' to …]]
([[stephenmcgruer]]著, [TIME[2018-05-14 08:20:33 +09:00]])
<https://github.com/w3c/csswg-drafts/commit/d00fb5d611284201a3259b1b8ae9b93aef6f9204>

[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]])
<https://github.com/w3c/csswg-drafts/pull/2671>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)