fjkktkys blog

最後のセクションの「CSS Floatのチュートリアルとテクニック」がリンク集になっていて、そこが参考になるんじゃないかと思われます。

今後も機会を見て、翻訳の修正などをしていきたいと思います。

CSS Float Theory: Things You Should Know | Smashing Magazine

floatはCSSの中でも最も直感に反する存在である。floatは周辺の要素を動かしてしまう(floating)ので可読性やユーザビリティを損ない、誤解や非難の対象になりがちだ。
でもそれはfloat自体に問題があるのではなく、ブラウザに問題があったのだ。一番ヒドいのは古いInternet Explorerのバグであろう。バグが原因だとわかったなら、情報をより洗練された奥深いやり方で見せる方法を操ることができる。

ひとたびfloatが使われるといつも表面化する問題に取り組み、一般的な誤解を明らかにしていこう。私たちは数十の関連する記事を閲覧し、floatを使ったCSSレイアウトで最も重要なことを選び出した。

floatについて知るべきこと

• 話は画像のテキスト回り込みまで遡ります。テキスト回り込みが、なぜWebがNetscape1.1とともに始まった時に追加され、またなぜCSSがfloatプロパティを使えるようになったのか。 Netscape1.1と共に現れた“Additions to HTML 2.0″では、”float”という用語はelementの横か下にfloatすることを意味しました。
  
  [Containing Floats]
• (訳者註：normal flowとはbodyタグの一番外側に相当する部分かと思われますが、違うかも)
  floatボックスをflowの外に出して限界まで右か左にずらした場合、floatボックスはnormal flowの中に位置する。コンテンツはfloatの横側に沿ってflowするだろう。normal flowの外側にfloatボックスを取り出すと、やはりnormal flowの中の全てのコンテンツが、floatボックスを完全に無視するかfloatボックスのためのスペースを作らない。[Float Positioning]
• ひとつの要素をブロックボックスになるようにfloatした場合。このボックスは現在のラインの右か左に位置させることができる。CSSのfloatプロパティのオプションは float: left, float: right or float: noneがある。[Floatutorial: Float Basics]
• float要素にはwidthを指定するべきだ（画像が直接適用されている場合は除く、画像にはwidthがあるから）。widthがない時の結果は想像できないものになる。
• 第一に、floatされるボックスには、明示的でも暗示的でも構わないので必ずwidthを持たせるべきだ。そうしないと、他のコンテンツがflowされる場所が残らずにfloatされてないコンテンツのように、水平にブロックが並んだボックスになるだろう。
  第二に、normal flow内のボックス要素ではないfloatされているボックス要素の縦マージンは、その上下に位置するボックス要素マージンを崩壊させない（破綻させない？マージンが効かないことあるよね）。
  最後に、normal flowではfloatされたボックスは隣りのボックスレベルのボックスに重ねることが可能だ。[CSS Positioning: Floats]
• まず覚えるべきことは、floatしている要素は左か右にずらされるということだ。真ん中にfloatする要素を作ることは不可能だ。このことは初心者をいらつかせることが多い。基本はfloatしている要素は右か左にしかずらせないということだ。[Float Layouts]
• 要素がその要素を含むブロックの端に達すると右か左にずれる時に、我々はその要素をfloatする。隣接する別の要素が同じ方向のfloatを持つなら、最初のfloat要素の端に達しない限りはずれない。[…] より多くの要素を同じ方向にfloatしようとすると、それらの要素はスタックして、そのうちスペースを使い果たすだろう。 […] 行(on the line)でスペースが不足する場合、それらの要素が収まるまで下へとずれる。 [Float Layouts]
• 複数のブロックやボックスを含むということ: ブロックを含むというのは、 他のいくつかの要素（複数のボックスの子要素）を含むボックスやブロックを含んでいるということである。１要素がブロックを含むということはこういう意味だ。“ブロックに含まれる要素は生きている”. [Floatutorial]
• floatされたボックスは、そのボックスの外側の端がそのボックスを含むブロックの端か別のfloatの外側の端にに達するまで左か右へと動くだろう。[Floatutorial: Float Basics]
• 特にnormal flow内に収まるようにボックスが縦方向に位置する場合は、一番上のボックスがcurrent line boxの上に揃えられる。しかし、ボックスが横方向に位置する場合は、そのボックスが含まれているブロックのパディングの範囲内で（他のコンテントと同様に）右か左へと可能な限り移動する。取り囲まれているinlineコンテントは反対側へのflowが許されている。[CSS Positioning: Floats]
• flow内ではないfloatをした場合、floatが存在しないかのように縦方向にflowしたfloatボックスの前後に、位置が決められていない複数のブロックボックスが作られる。しかしながら、line boxesはfloatボックス用の短縮された場所を用意されたfloatに隣接して作られる。floatボックスの前に位置するcurrent line上のあらゆるコンテントは、floatボックスの他のside内で最初に有効なline内で再びflowされる。
  
  [W3C Visual Formatting Model]
• current lineにおけるfloatボックスのための横方向のスペースが十分にない場合、 十分なスペースが確保されるまでline by lineでそのfloatボックスは下方向へと移動する。[Floatutorial: Float Basics]
• floatボックスはそのfloatボックスが作られたlineの上端の上側に位置させることはできない。 […] floatボックスの上端はcurrent line boxの上端（またはline boxを持たない前のブロックボックスの下端）に揃えられる。[Float Layouts]
• float theoryについて真に理解したいなら、CSSにおいてline boxが意味するところを理解するべきだ。残念ながら、それを言い換えると、インラインボックスが意味することの理解が必要ということだ。 […] インラインボックスはブロックレベルでない要素（EMタグのような）によって作られる。 […] ラインボックスは、ブロックレベルに含まれる要素内のラインとして作られた全てのインラインボックスを含む架空の矩形である。ラインボックスは少なくともそのラインボックスで最も縦に長い。 [Float Layouts]
• float: leftされた並んでいるように見えるDIV要素内の各カラムを取り囲もうとする場合、我々はそれがカラムになることを期待する。一番下に位置するfull-widthのフッタが欲しいなら、カラムがどんなに長くなろうとも、そのフッタにclear: bothをセットすれば良い。[Float Layouts]
• floatを含む要素に対してfloatを使うことの潜在的な欠点は、何重にもネストしたfloat要素のレイアウトの解釈を常にブラウザーに任せるということだ。これらのfloatが、floatの使用、ポジショニング、テーブルという場合に、さらに複雑なレイアウトの一部となり、状況はますます酷くなる。 [Containing Floats]

floatのclearについて

• floatされた要素に続く要素は、floatされた要素に包まれているだろう。このようなことを起こさないために、clearプロパティをfloatされた要素に続く要素に適用できる。clearには４つのオプションがある。clear: left, clear: right, clear: both or clear: none[Floats and “clear”]
• 余計なHTMLマークアップをせずにCSSのfloatをclearするテクニック。３つの主要な方法がある。a)含まれている要素を同様にfloatする。b)containerにoverflow: hiddenを使う。c)CSSの疑似クラスである:afterを使ってコンテンツを作る。A test-page for techniques. [How to clear CSS floats without extra markup]
• 
  ネストされたfloatを“囲ん”でいるように見える外側のcontainerを作る標準的な方法は、containerの最後に完全に“cleared”された要素を置くことだ。そのcontainerは、dragging（足を引っ張る）, which has the effect of ‘dragging’ the lower edge of the containing box lower than the float.”

• [How To Clear Floats Without Structural Markup]


• 
  floatを使ったレイアウトの一般的な問題は、floatのcontainerはfloatに順応しないことだ。全てのfloat(例えば、containerの周囲のborder)のまわりのborderを追加したいなら、どうにかしてcontainerが行き着くところまでstretch upするようにブラウザに命令するべきだろう。overflow methodを使ってfloatをclearすることができる。
  
  
  
  [Clearing floats]


• :afterの利用: ‘period’のような簡単な文字を挿入するために :after を使い、{clear: both;}で作られた要素が存在することを想像せよ。 それでperiodが見えるようにするため我々はよく{height: 0;} and {visibility: hidden;}を使うが、container boxの終端を片付けるためにlineスペースを散らかしたくない。
  

• [How To Clear Floats Without Structural Markup]


• Clearfix: borderやbackgroundが見えるようなcontainer box内にfloatが含まれる場合、そのfloatはfloatが縦方向に収まるようにそのcontainerの下端を自動的に下げない。そのかわりに、floatはcontainerに無視され、旗のようにcontainerの下側にぶら下がる。 […] IE/Winはcontainer要素が大きさ(widthとか？)を持つ場合に限り、container内のfloatを‘自動的に’取り囲む。 [Easyclearing: How To Clear Floats Without Structural Markup]

CSS Floatのバグ

• （ここ怪しい）container要素がその中にリンクを持つ場合、floatの状態が続く。これはいくつかのリンクがhoverの場合起こり、auto-enclosingがtoggleされるかauto-enclosingが無効になり、container boxの下端が突然floatされていないcontentの下部に現れる。hoverは他のリンクを元の状態に戻す。この面白い効果はIE/Win Guillotine Bug（ギロチンバグ）と呼ばれている。、a:hoverがリンクの背景や他の多くのスタイル（padding, margin, font）が変更される場合にのみ、toggleされる。不思議なことに、hoverでのテキスト色の変更はこのバグが起こらない。
  
  
  [How To Clear Floats Without Structural Markup]


• The IE Escaping Floats Bug: もしdivボックスをmargin, borders, left floatされたdivと一緒に使うなら、IE Winでは２つの表示エラーが起こる。１つは、containerが最終行のfloatだけを含み、そのfloatが右へと押しやられ、スクリーンの右端まで行き着く。そのため、横方向のスクロールバーがすごい長くなる。 […] 解決方法: IE/winでは、heightを与えることができ、表示されているcontainerのheightには影響しない。IEはboxとdimension（大きさとか面積などの意）に非標準のふるまいを持つので、この方法が可能だ。 Holly Hack（ヒイラギハック）: 要素にheightを指定する。例えばheight: 1%;というように。
  


• Win/IE6 Peekaboo bug（いないいないばあバグ）: リキッドボックスが内部にfloatを持ち、contentがそのfloatに沿うように見えている。IE6ではcontentが見えなくなる。画面を下にスクロールするか別窓に移動すると、その上で全部見えるようになる（IE7でやっとこのバグはなくなった）。
  


• IE/Winはleft floatされたブロックに3pxの右マージンを与える。あなたがどうしようと、そのマージンはそこに存在する。アクションの中でこの現象を見るには、floating bugの最初とdouble float fixをチェックせよ。このバグはThe IE Three Pixel Text-Jog（3ピクセルのテキストのでこぼこ）とも呼ばれている。 [Floating Bugs].


• IE Duplicate Character Bug（文字コピーのバグ）: IE6は複数のfloat要素によって引き起こされる不可解なバグを持つ。最後にfloatされた要素からテキストの文字が時々最後のfloatの下に複製されるというバグだ。一連のfloatの間に挟まれたこういった普通のHTMLコメントに限っては、このバグがいきなり発生する。Bugfix.
  
  
  [IE Duplicate Character Bug]


• ウェブページのコンテントのレイアウト時における最も一般的なタスクは、テキストflowの周辺に画像を右か左にfloatして配置することである。floatされた画像にclearを追加すれば、それぞれの要素を前の要素の直下に必ず置くことができます。しかし、IEで同じ要素の中にfloatとclearのプロパティを置くと大きなギャップが出現します。ギャップはCSSの修正をさらに複雑にさせます。元々使っていたCSSにはほど遠いぐらいに。Bugfix.” [Close Gaps Next to Floated Images in Internet Explorer]


• left floatをconatiner boxの中に置き、containerの左サイドから離そうとしてそのfloatに左マージンを使う。IEではleft floatのマージンは２倍（！）の長さになります。 [The IE Doubled Float-Margin Bug]


• floatされたdiv要素に隣接するインライン要素（画像やテキスト）が期待される位置からインデントされたように見えるバグがあります。IE/Winのfloat要素への奇妙なマージン操作によってインデントされます。[Floats, Margins and IE]


• 簡単な解決方法は、IEの多くのfloatのバグを修正することである。全てのfloatがブロックボックスになるようにすればいい。displayプロパティにnoneを指定されない限りは、floatは無視されるようにすればいいと、よく言われている。floatしている要素にdisplay:inlineを設定すると、魔法のようにいくつかのIE/Winのバグが出なくなる。IE/Winは、多くのバグが修正されてはいるが、inlineボックスの中に要素を作ることができない。 [Float Layouts]


• Safari1.3とSafari2.0で、ある要素にfloatとマイナスマージンを組合せて使うと、その要素内のリンクがクリックできなくなる。テキストも同様に非常に選び（フォーカス）にくくなり、フォーカスされなくなった時にtab through the linksするとリンクは見えなくなる。( Text also becomes very difficult to select, and if you tab through the links they disappear when they lose focus.)この現象を回避するには、マイナスマージンを持つfloat要素にposition:relativeを追加すると良い。 [Float + negative margin problems in Safari]


• 現在、MSIE 7はfloatされた子要素を含むcontainerを折り畳むことで、W3C規格を正しく実装している。しかし、generated contentには実装されていないので、easy clearing methodと呼ばれている。( However, as it has not implemented generated content, the so called easy clearing method is not an option for clearing floats in MSIE 7.) easy clearing methodはMSIE 7のfloat clearのオプションではない。IEの全バージョンでの適切な解決方法は以下のようなoverflow methodである。

1. #content { overflow : hidden; _height : 1%; }

• [Clearing floats without sructural markup in IE7]

CSS Floatのチュートリアルとテクニック

• Float Containing Rules By Browser（ブラウザーごとのfloatルール）
  
  
  この表は各ブラウザで、containerがfloatをclearする理由のルールを示している。(The table shows which rules cause a container to clear its floats in each of the main browsers.)


• CSS vertical centering using float and clear - crossbrowser（CSSのfloatとclearを使ったverticalセンタリング）
  
  ボックスはブラウザーの表示領域(viewport)の中央に来る。表示領域がそのボックスよりも小さくなれば、コンテントが見えなくなることはない。(The box stays in the middle of the browser’s viewport. The content does not disappear when the viewport gets smaller than the box.)


• A floated page layout（floatされたページのレイアウト）
  このチュートリアルはweb標準とCSSを使ってのpage layout like this（こんな感じのレイアウトのページ）の作り方を示している。こういったレイアウトは色んな使い道がある。ありがちなのはフォトギャラリーとかだけど。リンク先のページは未完成のものがだ、画像とテキストのレイアウトに集中するためにシンプルなままにしておきたい。


• Build a better Web site by understanding floated elements in CSS（CSSでのfloat要素を理解してより良いWebサイトを作る）
  この記事は、float要素に関する簡単な手引きになっている。CSSのfloatとclearについて、あなたがfloatされた要素をWebページのHTMLとしてより上手に使えるように、いくつかの例が示されている。


• Create Columns with Floats（floatを使ったカラムを作る）
  一般的に、CSSでマルチカラムのレイアウトをするには、現在２つの方法がある。それはabsoluteを使ったポジショニングとfloatである。非常にメジャーなのは、floatを使った方法である。このチュートリアルでは、floatとwidthとmarginを使ったカラムの作り方を学べる。


• Safe Lists Next to Left-Floated Elements（left floatされた要素の隣の安全リスト）
  良いHTMLリストのフォーマットは多くの色んな方法がある。しかし、多くの方法は全てのコンテキスト（ここではHTMLの構成）とブラウザーに依存していないか？この記事では、left floatされた要素の隣のリストという、シンプルなコンテキストに注目する。


• Creating Liquid Layouts with Negative Margins [and Floats]（マイナスマージン[とfloat]を使ったリキッドレイアウトを作る）
  私はマイナスマージンを使ったCSSを実際にやってみる機会があった。マイナスマージンを使うとcontentの領域をブラウザーの端っこから離すことができる。例えばサイドバーのための領域を確保するために。


• Image floats, without the text wrap!（テキストを含まないで画像をfloatする）
  
  
  contentブロックの中でleft floatされた画像で、そのcontentが画像からwrapされることを避けたいということが何度もありませんでしたか。


• Floating an image to the right（画像を右へfloatする）
  
  
  テキストブロックの右へ画像をfloatさせ、その画像にborderを指定せよ。


• Floating an image and caption（画像とキャプションのfloat）
  
  
  テキストブロックの右側に画像とキャプションをfloatし、子要素のセレクターを使ってboraderを指定せよ。


• Floating a series of “clear: right” images（clear: rightした画像の一連のfloat）
  
  
  ページの右側に落ち着いた一連の画像のそばにあるcontentを一緒にfloatせよ。


• Floating an image thumbnail gallery（サムネイルギャラリーの画像のfloat）
  
  
  一連のサムネイル画像とキャプションを一つのイメージギャラリーとして保存しfloatせよ。


• Floating next and back buttons using lists（nextとbackのボタンをリストを使ってfloatする）
  
  
  シンプルなリストの中でbackとnextボタンを反対にしてfloatせよ。(Float a simple list into rollover “back” and next “buttons”.)


• Floating inline list items（インラインリストの項目をfloatする）
  
  
  水平なナビゲーションバーに加工されたシンプルなリストをfloatせよ。


• Floating a scaleable drop cap（拡大縮小するドロップキャップ（訳者註：英文のパラグラフの最初の文字が大きくされているもの）のfloat）
  
  
  スケーラブルなドロップキャップをサイズを変えてline-heightにあわせて調整して、左へfloatせよ。


• Liquid two column layout（２カラムのリキッドレイアウト）
  左のnavをヘッダとフッタを含んだ２カラムのレイアウトとして、floatせよ。


• Liquid three column layout（３カラムのリキッドレイアウト）
  左と右のカラムをヘッダとフッタを含んだ３カラムのレイアウトとして、floatせよ。


• CSS Float Html Tutorial（CSS floatのHTMLチュートリアル）
  ボックスの外側を考える時、もしかすると、それ以上にきちんと、そのボックスと並行してfloatする(It’s time to think outside the box, or maybe, more accurately, floating alongside of it.)。正確なCSSコーディングが我々を打ち負かすのはどこか？CSSは伝統的なテーブルレイアウト（ページレイアウトの代替案としてたまに考えないこともない）に比べるとかなり自由だ。かわいそうに！今こそボックスの外側を考える時だ。