为什么容器内的容器在浮动时会失去其背景颜色？

Question

我和我的工作＆＃34;容器设置为浅灰色背景色。在这个容器里面，有两篇文章，它们的容器命名为＆＃34; my-blog＆＃34;和＃34;我的游戏＆＃34;

我漂浮了＃34;我的博客＆＃34;和＃34;我的游戏＆＃34;向左，它失去了背景颜色。

为什么第二个容器的背景颜色（＆＃34; my-blog＆＃34;和＃34; my-game＆＃34;）在＆＃34; my-works＆＃34; （父容器）与其父容器的背景颜色不同？

html代码

    <section class="my-works">
        <h3> MY WORKS </h3>

        <article class="my-blog">
            <h4>My Blog</h4>
            <img src="blog.png" width="45%">
        </article>

        <article class="my-game">
            <h4>A Tambay Inspired Flappy Bird - Yotni Bird</h4>
            <img src="flappybird.png" width="45%">
        </article>

    </section>

CSS代码

    .my-works {
    width:100%;
    background-color: #F0F0F5;
        }

    .my-works h3 {
        text-align:center;
        margin-top: 0;
        padding: 20px;

        }

    .my-blog {
        width: 40%;
        float:left;


        }
    .my-game {
        width: 40%;
        float:left;


        }

这里是图片

Answer 1

由于应用了浮点数，.my-works div将不再完全包裹内部div。

您需要在.my-works div

中添加某种clear或clearfix

<强> clearfix

.my-works:before,
.my-works:after { 
    content: ""; 
    display: table;
}
.my-works:after {
    clear: both;
}

或者您可以在html中添加clear:both;标记。

清除

<section class="my-works">
    <h3> MY WORKS </h3>

    <article class="my-blog">
        <h4>My Blog</h4>
        <img src="blog.png" width="45%">
    </article>

    <article class="my-game">
        <h4>A Tambay Inspired Flappy Bird - Yotni Bird</h4>
        <img src="flappybird.png" width="45%">
    </article>

  <br style="clear:both">

</section>