Css 家长<；部门>；不使用float属性包装子元素

请看一看，并向我解释为什么绿色的

没有环绕橙色的

#绿色的{
边框：20px实心#3D3；
}
#橙色的{
宽度：100px；
高度：100px；
边框：10px实心橙色；
浮动：左；
}

尝试将

float:left

和

display:block

添加到外部div

---

请参见更新的示例-

绿色框不是浮动元素

---

您需要清除嵌套div之后的float或同时清除两者。

默认情况下，元素不会展开以包含浮动的子元素

有许多解决方法，例如浮动父级、使用clearfix或向父级添加

overflow:hidden

就我个人而言，我尝试使用后者

---

.

如果您不想将外部div向左浮动，可以将其设置为

显示：表格

这将使外部div环绕内部div。

<div id='green'>
  <div id="orange"></div>
  <div style="clear:both"></div>
</div>

您可以将display:inline块添加到橙色框中。

谢谢！解决了我的问题。你可能已经知道了，但是任何浮动的东西都会自动变为块级别：）哇，我已经被困在同一个问题上好几个小时了。谢谢如果有一些子项向左和向右浮动，则使用

width:100%

以及

float:left

将父div置于中间，但如果我想将父div置于中间，该怎么办？我发现

overflow:hidden

是最有效的，对于我自己的代码，最不容易产生副作用的修复。如果您在父级中没有任何显示为工具提示的内容，这是一个不错的方法，因为如果它超出父级区域，它将被剪切。这是一个很好的解决方案，但为什么它会起作用？我只是仔细检查了一下我对这个命令的理解，如果它不合适的话，它似乎应该隐藏内容。我遗漏了什么？就像你的代码示例一样，我更喜欢一些文本来解释“clear:both”在这个场景中的作用，以及它解决问题的原因。我更喜欢你的解释，我更喜欢示例代码来准确地显示这个解决方案在代码中的样子。“inline block”与“block”有何不同为什么这个设置有效？块元素不允许其他元素显示在同一行上，另一方面，内联块允许这样做，但也拥有一些块元素属性。

<div id='green'>
  <div id="orange"></div>
  <div style="clear:both"></div>
</div>