ひしもち 
この記事は、Webデザイナーを目指して勉強を始めてから実際にWebデザイナーとして働き出すまでの間に書いた記事です。内容は2015年2月21日に書かれたものです。
CSSを勉強し始めてまず最初につまづくことになったのが「float」でした。
2カラムレイアウトを組んでみようと思って挑戦するも、なぜか崩れてしまう（「カラム落ち」って言うのかな……）。
どうやらwidthの値がちゃんと合ってないみたい。
色々な値をいじったり、ググってみたりして、やっと意味がわかったので覚書きしておきます。
floatする要素をぐるっと包む親要素（「id=”wrapper”」を振ってます）のwidthを960pxに設定した場合。
まず、子要素A、子要素Bのwidthの合計が960pxを超えると横幅が収まりきらないために横に並べない、ってのはスッと分かります。
が、widthの値が960px以内であっても、収まりきらずにカラム落ちする場合があります。
意味が分かってしまえば不思議でもなんでもないのですが、私はここで大混乱していました；
単純にwidthの値だけを計算すればいいのではなく、子要素にそれぞれ設定できる「margin」「border」「padding」「width」の値を全て計算して、親要素のwidth値と合わせなければならなかったんですね。
ネットで調べると、marginについては触れられている記事も多かったのですが、borderやpaddingも組み合わせて例示してあるようなところはなかなかなくて（実際にはそんなに組み合わせて使わないのかな？）、どの値が影響するのか把握するのに随分時間がかかってしまいました……。
親要素 { width: 960px; }
子要素A { margin: 20px; padding: 10px; width: 400px; float:left; }
子要素B { margin: 30px; border: 5px; width: Ｘ; }
この時、Ｘに入る値は？
子要素Aの各値の合計は、(20+20+10+10+400)pxで460px。そして、子要素Bの各値の合計は、(30+30+5+5+X)px。ってことは、Ｘは、（960-460-70）pxで430px。
分かってしまってからだと、こんなことわざわざ書く必要あるのかしら、と思うようなことですが。