/
295.txt
133 lines (94 loc) · 7.16 KB
/
295.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
[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]