読者です 読者をやめる 読者になる 読者になる

Future Convergence PRJ.

主にプログラミング関連で調べたことのメモ(趣味プログラムなので動作は保証しません)

floatプロパティは浮くって話

HTML/CSS

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

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

floatを使うと「floatで浮き上がった画面」と「残った画面」の2枚ができて、その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;
}