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

我的“我的作品”容器设置为浅灰色背景色。在这个容器里面，有两篇文章，它们的容器被命名为“我的博客”和“我的游戏”为什么浮动时容器内的容器会丢失背景颜色？

我把“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; 


     }

这里的图像

来源

2015-09-18 jerome_mjt

在你的 “我-作品” 容器中，加入 “溢出：汽车;”。这应该允许容器尊重浮动的元素。你也可以尝试“清除：两者;”在容器上如果溢出不起作用。 –

的.my-works格将不再完全包裹，因为内部的div，浮动应用。

您将需要某种形式的明确或clearfix添加到.my-works DIV

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>

来源

2015-09-18 13:30:48 Aaron

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

回答

相关问题