Question

我有一个非常简单的设计，我有4个小盒子，每个盒子排列在一起，每个盒子都有相同的尺寸。但是，当我尝试应用＆＃34; float：left＆＃34;在盒子里，它的父母div的背景颜色消失了。为什么是这样？它与背景颜色有什么关系？我希望我的背景颜色保持不变。

参见jsfiddle：http://jsfiddle.net/mush5ecc/

我的HTML代码：

<div id="careers">
  <div class="container">
    <h2 id="careers_title">Careers</h2>

    <div id="four_grids">
        <div id="top_left" class="grid"></div>
        <div id="top_right" class="grid"></div>
        <div id="bottom_left" class="grid"></div>
        <div id="bottom_right" class="grid"></div>
    </div>

  </div>
</div>

我的CSS代码：

  #careers {
    background-color: orange;
  }

 .container { 
    width: 1026px; 
    margin: auto;
  }

  #careers_title {
    text-align: center;
    padding-top: 67px;
    padding-bottom: 60px;
  }

  .grid {
    width: 50px;
    height: 50px;
    float: left; /* COMMENT FLOAT TO SEE WHAT HAPPENS */
   }


   #top_left {
     background-color: blue;
   }


  #top_right {
    background-color: green;
  }


  #bottom_left {
    background-color: red;
  }


  #bottom_right {
    background-color: yellow;
  }

Answer 1

将overflow: hidden应用于<div id="four_grids">。

有关此行为的详细信息，请参阅here。

Answer 2

我有点不确定你的目标是什么，但我添加了以下css，我认为这可能是你正在寻找的。

#four_grids {
    position: absolute;
}

如果我申请＆＃34;浮动：左;＆＃34;对于内部div，为什么它会影响它的父div的背景颜色？

2 个答案: