CSS边框不包围嵌套的div

Question

只是想知道为什么.border不会包围嵌套的div d1，d2，d3。

id为main1的div有一个5px实线边框，我试图用ids div1，div2，div3包围三个嵌套的div。每个嵌套的div都有自己的2px实线边框。似乎它应该工作，但也许某些东西被覆盖在某处。

.border {border: 5px solid RosyBrown;}
.border-thin {border: 2px solid RosyBrown;}
div#main1 {width: 90%;margin: 0 auto 0 auto;}
div#d1 {width: 31%; float: left;}
div#d2 {width: 31%; float: left; margin: 0 0 0 3.5%;}
div#d3 {width: 31%; float: right;}

<div id="main1" class="center border">
   <p>Main</p>
     <div id="d1" class="border-thin">
       <p>d1</p>
     </div>
     <div id="d2" class="border-thin">
       <p>d2</p>
     </div>
     <div id="d3" class="border-thin">
      <p>d3</p>
     </div>
</div>

Answer 1

因为你没有清除浮动，因为它没有占用视图的流量。得到：

overflow: hidden;

到父div，或者您可以使用clearfix。

.border {
  border: 5px solid RosyBrown;
}
.border-thin {
  border: 2px solid RosyBrown;
}
div#main1 {
  width: 90%;
  margin: 0 auto 0 auto;
  overflow: hidden;
}
div#d1 {
  width: 31%;
  float: left;
}
div#d2 {
  width: 31%;
  float: left;
  margin: 0 0 0 3.5%;
}
div#d3 {
  width: 31%;
  float: right;
}

<div id="main1" class="center border">
  <p>Main</p>
  <div id="d1" class="border-thin">
    <p>d1</p>
  </div>
  <div id="d2" class="border-thin">
    <p>d2</p>
  </div>
  <div id="d3" class="border-thin">
    <p>d3</p>
  </div>
</div>

预览

Answer 2

这是由浮动元素引起的。默认情况下，它们不包含在其他DIV的高度中。

将val (listFailures: List[Throwable], listSuccesses: List[Int]) = list.partitionSuccess 添加到overflow: hidden;。我知道这听起来很奇怪，但它有效...