1. 第一种方案（overflow: hidden）

html 复制代码

  <style>
    .container {
      background-color: bisque;
      /* 清除方案 */
      overflow: hidden;
    }

    .inner {
      width: 50px;
      height: 50px;
      background-color: cadetblue;
      float: left;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="inner"></div>
  </div>
</body>

2. 第二种方案（clear：both）

html 复制代码

  <style>
    .container {
      background-color: bisque;
    }

    .inner {
      width: 50px;
      height: 50px;
      background-color: cadetblue;
      float: left;
    }
    // 清除方案
    .side {
      clear: both;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="inner"></div>
    <div class="side"></div>
  </div>
</body>

3. 第三种方案（为元素）

html 复制代码

  <style>
    .container {
      background-color: bisque;
    }
    // 清除方案
    .container::after {
      content: "";
      display: table;
      clear: both;
    }

    .inner {
      width: 50px;
      height: 50px;
      background-color: cadetblue;
      float: left;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="inner"></div>
  </div>
</body>

示例：