CSSで背景色を指定する

Question

質問

CSSを使って背景色を指定したい

問題のコード

<div class="top">
    <div "year-month">
        <h1>2018年11月</h1>
    </div>
    <div class="move_month">
         <a href="/2018/10">10月</a>
    </div>
    <div class="move_month">
         <a href="/2018/12">11月</a>
    </div>
</div>

このようなコードでCSSを次のように指定しています。

.top div{
    float: left;
}

.top{
    background-color: #8eff8e;
}

.year-month{
    margin-right: 10px;
    background-color: rgba(255,255,255,0);
}

.move_month{
    margin: 30px 10px 10px 10px;
    font-size: 18px;
}

クラスが"top"で指定されているブロック全体を#8eff8e色にしたいのですが、色が付きません。

試したこと

<div class="top">
    aaaaaaaaaaaaa <!-- 追加 -->
    <div "year-month">
        <h1>2018年11月</h1>
    </div>
    <div class="move_month">
         <a href="/2018/10">10月</a>
    </div>
    <div class="move_month">
         <a href="/2018/12">11月</a>
    </div>
</div>

のように内側のdivタグの外側に適当に何か書くとaaa...だけ背景色が反映されました。なので内側化のdivタグが"top"の背景を隠してしまっているのだと思います。

そこで内側のdivタグの背景色で透明度を1にしたりしたのですが、うまくいきませんでした。

どのようにすれば<div class="top">~</div>全体の背景色を反映させることができるでしょうか？よろしくお願いいたします。

Answer 1

<div class="top">の領域がなくなっているので、子要素の領域も範囲にするために「overflow:auto;」を追加してあげれば大丈夫なはずです。

動作サンプル：https://jsfiddle.net/Lwca9p4z/

.top div{
    float: left;
}

.top{
    background-color: #8eff8e;
    overflow:auto;
}

.year-month{
    margin-right: 10px;
    background-color: rgba(255,255,255,0);
}

.move_month{
    margin: 30px 10px 10px 10px;
    font-size: 18px;
}

Answer 2

内側化のdivタグが"top"の背景を隠してしまっているのだと思います。

違います。「.top」の子要素divがfloatにより、「親の高さ」が無くなっているのが原因です。

---

（対応策のひとつ）

.top{
  background-color: #8eff8e;
  overflow: hidden; /* ← 追加 */
}

-追記-
他の回答と重なってしまいスミマセン。投稿時には他の回答と重ならないように気を付けます。

Answer 3

.top{
    float: left;
}
```or
```CSS
.top{
    overflow: hidden;
}

【よこ並びのCSS。】
http://lopan.jp/layout/