强制下一个div转到下一行

Question

我有这样的结构：

.divParent{
  height: 100px;
}

.div1 {
  height: 40px;
  background: blue;
}

.div2{
  height: 150px;
  background: yellow
}

<div class="divParent">
  <div class="div1">Div 1</div>
  <div class="div2">Div 2</div>
</div>
<div class="divNew">
  <span>Hello</span>
</div>

我希望divNew转到下一行，而不会与divParent的内容重叠。我尝试了很多事情，但没有任何结果。

我知道，我可以使用<br />标记来执行此操作，但我不想使用它。还有其他解决方案吗？

Answer 1

使用flex

.divParent{
  clear:both;
  height: 100px;
}

.div1 {
  height: 40px;
  background: blue;
}

.div2{
  height: 150px;
  background: yellow
}
.divParent, .divNew {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.divNew { 
  background:red;
} 

<div class="divParent">
  <div class="div1">Div 1</div>
  <div class="div2">Div 2</div>
</div>
<div class="divNew">
  <span>Hello</span>
</div>

Answer 2

您不需要删除高度，您的第二个div实际上会引起问题。比父母大。因此，要么增加父对象，要么减少div2。