爲什麼浮動時容器內的容器會丟失背景顏色？

我的「我的作品」容器設置爲淺灰色背景色。在這個容器裏面，有兩篇文章，它們的容器被命名爲「我的博客」和「我的遊戲」爲什麼浮動時容器內的容器會丟失背景顏色？

我把「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

爲什麼浮動時容器內的容器會丟失背景顏色？

回答

相關問題