floatプロパティは浮くって話 - Future Convergence PRJ.

html/CSSのfloatプロパティについて。
floatは文字通り「浮く」ってことを理解したら、動作がしっくりくるようになった。

以下、図にfloatを設定したdiv要素の配置結果をまとめてみた。図の中で浮くっていうのは画面から飛び出すイメージで↑は見たままの方向に移動するイメージ。
f:id:CHappy:20150328024433p:plain

floatを使うと「floatで浮き上がった画面」と「残った画面」の2枚ができて、その２つを重ねるっていうイメージがいいのかな？重ね合わせるときに「残った画面」の隠れちゃう部分を表示するためにブロックレベル要素は下段にずらされるし、インライン要素はブロックの見えている部分に表示されるって感じだと思う。

■サンプルソース
test.html

<!DOCTYPE html>
<thml lang="ja">
<head>
    <meta charset="utf-8">
    <title>FloatTest</title>
    <link rel="stylesheet" href="../common/css/test.css">
</head>
<body>
   <div id="boxA">boxA</div>
   <div id="boxB">boxB</div>
   <div id="boxC">boxC</div>
</body>
</html>

test.css

#boxA {
    width: 400px;
    background-color: #FF2255;
    float: left;
}

#boxB {
    width: 300px;
    background-color: #55FF22;
    float: left;
}

#boxC {
    width: 200px;
    background-color: #2255FF;
//    float: left;
}