CSS边框不环绕嵌套的div答案

【问题标题】：CSS border not wrapping around nested divsCSS边框不环绕嵌套的div
【发布时间】：2017-02-23 20:40:48
【问题描述】：

只是想知道为什么 .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>

【问题讨论】：

你必须清除浮动。
计算父元素高度时不考虑浮动元素。谷歌搜索“css clearfix”。删除<p>Main</p>，您将看到div#main1 的高度将完全崩溃，因为它的所有子项都浮动，使其计算高度为0。此外，我强烈建议您不要在css 中使用id 选择器，除非您确切知道为什么你使用它们。

标签： html css

【解决方案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>

预览

【讨论】：

【解决方案2】：

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

将overflow: hidden; 添加到#main1。我知道这听起来很奇怪，但它正在工作......

【讨论】：