Html CSS边框未环绕嵌套的div

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

id为main1的div有一个5px的实心边框，我正试图将其环绕在id为div1、div2、div3的三个嵌套div周围。每个嵌套div都有自己的2px实心边框。看起来它应该可以工作，但可能有什么地方被覆盖了

.border{border:5px solid RosyBrown；}
.border薄{border:2px实心RosyBrown；}
div#main1{宽度：90%；边距：0自动0自动；}
div#d1{宽度：31%；浮动：左；}
div#d2{宽度：31%；浮动：左侧；边距：03.5%；}
div#d3{宽度：31%；浮动：右；}
主要

d1

d2

d3

因为您没有清除浮动，因为它不会占用视图的流。给出：

overflow: hidden;

到父div，或者您可以使用

clearfix

.border{
边框：5px实心玫瑰色；
}
.薄边{
边框：2个实心RosyBrown；
}
主分区1{
宽度：90%；
边距：0自动0自动；
溢出：隐藏；
}
第一分区{
宽度：31%；
浮动：左；
}
d2分区{
宽度：31%；
浮动：左；
利润率：03.5%；
}
第三分区{
宽度：31%；
浮动：对；
}

主要

d1

d2

d3

因为您没有清除浮动，因为它不会占用视图的流。给出：

overflow: hidden;

到父div，或者您可以使用

clearfix

.border{
边框：5px实心玫瑰色；
}
.薄边{
边框：2个实心RosyBrown；
}
主分区1{
宽度：90%；
边距：0自动0自动；
溢出：隐藏；
}
第一分区{
宽度：31%；
浮动：左；
}
d2分区{
宽度：31%；
浮动：左；
利润率：03.5%；
}
第三分区{
宽度：31%；
浮动：对；
}

主要

d1

d2

d3

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

---

添加

溢出：隐藏至
#main1
。我知道这听起来很奇怪，但它正在工作…
这是由于浮动元素。默认情况下，它们不包括在其他div的高度中

添加
溢出：隐藏至
#main1
。我知道这听起来很奇怪，但它正在工作…
您必须清除浮动。计算父元素的高度时不考虑浮动元素。谷歌搜索“css clearfix”。删除
Main
，您将看到您的
div#main1
的高度将完全塌陷，因为它的所有子项都浮动，而计算出的高度为0。另外，我强烈建议你永远不要在css中使用id选择器，除非你知道使用它们的确切原因。你必须清除浮动。计算父元素的高度时不考虑浮动元素。谷歌搜索“css clearfix”。删除
Main
，您将看到您的
div#main1
的高度将完全塌陷，因为它的所有子项都浮动，而计算出的高度为0。此外，我强烈建议您永远不要在css中使用id选择器，除非您确切知道使用它们的原因。