html - 为什么容器内的容器在 float 时会失去背景颜色？

Question

我的“my-works”容器设置为浅灰色背景颜色。在这个容器内，有两篇文章，它们的容器名为“my-blog”和“my-game”

我将“我的博客”和“我的游戏”向左浮动，它失去了背景颜色。

为什么“my-works”(父容器)内的第二个容器(“my-blog”和“my-game”)的背景颜色与其父容器设置的背景颜色不同？

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

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

您需要向 .my-works div 添加某种clear或clearfix

clearfix

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

或者您可以将带有 clear:both; 的标记添加到您的 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>

  <br style="clear:both">

</section>