スタイルシートでfloatを利用すると要素が横並びになるのは良いのですが、次の要素まで横並びになってしまいます。これを解除する方法をご紹介します。

解除するためにはclear:both;を使うだけです。

floatを使った時の回り込みとは？

例を示します。

XHTMLはこんな感じ。

<html>
<head>
    <title>CSSテスト</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
    <div id="container">
        <div id="top-box"></div>
        <div id="left-box"></div>
        <div id="right-box"></div>
        <div id="bottom-box"></div>
    </div> 
</body> 
</html>

CSSはこんな感じ。

div#container {
}

div#top-box {
    width: 50px;
    height: 50px;
    background-color: rgb(9, 45, 235);
}

div#left-box {
    float: left;
    width: 50px;
    height: 50px;
    background-color: rgb(235, 9, 9);
}

div#right-box {
    float: left;
    width: 50px;
    height: 50px;
    background-color: rgb(255, 245, 0);
}

div#bottom-box {
    width: 50px;
    height: 50px;
    background-color: rgb(54, 235, 9);
}

ブラウザで見るとこのように表示されます。bottomが見当たりません。。。実はbottomはleftの下に隠れてしまっています。

css_float_left1

解決方法は1行追加するだけ

これを解決する方法は、たったの1行追加するだけです。clear: both;を追加すると、floatが解除されるため、bottomが姿を表します。

div#bottom-box {
    clear: both;
    width: 50px;
    height: 50px;
    background-color: rgb(54, 235, 9);
}

このようにbottomが表示されるようになりました。

css_float_left2

他にもclearfixを使ったり、overflowを使って解除する方法もありますが、このやり方が一番シンプルで多用しています。

本日は以上です。

 

こちらの投稿も読んでみませんか？

  1. [CSS]先頭に戻るボタンを常に右下に表示する方法
  2. [JavaScript]子ウインドウから親ウインドウの関数を実行する
  3. [CSS]backgoundでグラデーションと背景画像を同時に指定する方法
  4. [JavaScript]先頭に戻るボタンをスクロールした時だけ右下に表示する方法
投稿タグ