html - CSS 边框不环绕嵌套的 div

Question

只是想知道为什么 .border 不会环绕嵌套的 div d1、d2、d3。

id 为 main1 的 div 有一个 5px 的实线边框，我试图围绕三个嵌套的 div，id 分别为 div1、div2、div3。每个嵌套的 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

因为您还没有清除 float ，因为它不占用 View 的流。给:

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>

预览