div容器内的换行

<style>
  .inline-block-div {
    display: inline-block;
  }
</style>

<div class="inline-block-div">内容1</div>
<div class="inline-block-div">内容2</div>

<style>
  .flex-div {
    display: flex;
  }
</style>

<div class="flex-div">
  <div>内容1</div>
  <div>内容2</div>
</div>

<style>
  .float-div {
    float: left;
  }
</style>

<div class="float-div">内容1</div>
<div class="float-div">内容2</div>

<style>
  .nowrap-div {
    white-space: nowrap;
  }
</style>

<div class="nowrap-div">
  <span>内容1</span>
  <span>内容2</span>
</div>

<style>
  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }
</style>

<div class="clearfix">
  <div class="float-div">内容1</div>
  <div class="float-div">内容2</div>
</div>