为什么该边框不覆盖其内容[重复]答案

【问题标题】：Why does that border not covering up its contents [duplicate]为什么该边框不覆盖其内容[重复]
【发布时间】：2020-06-10 13:23:41
【问题描述】：

我在这里分享一支笔here 我在 div.container 中插入了 6 个 div.squares 我已经设置了 .squares css 属性 float:left 我的疑问是- 当我为 div.container 设置红色边框时，该边框不会覆盖 6 个 div（而是边框仅显示在正方形的顶部），如笔中所示 据我说，那个边框应该覆盖所有的正方形

Click on this link to see the pen

 .square{
      padding-bottom:30%;
      width:30%;
      margin:10px; 
      background-color:brown;
      float:left;
    }
    .container{
      height:100%;
      max-width:600px;
      margin:20px auto;
      border:2px solid red;
      height:auto;
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>

</body>
</html>

【问题讨论】：

标签： html css frontend css-float border

【解决方案1】：

那是因为 float: left

看看我是怎么做到的。

.square{
      padding-bottom:30%;
      width:30%;
      margin:10px; 
      background-color:brown;
    }
    .container{
      height:100%;
      max-width:600px;
      margin:20px auto;
      border:2px solid red;

    }
    .row {
      display: flex;
      flex-wrap: wrap;
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">

  <div class="row">
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
  </div>

  <div class="row">
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
  </div>
   
  </div>

</body>
</html>

【讨论】：

它工作感谢您的回答......如果所有 div.square 都在 div.container 中，你知道怎么做
是的，只需删除 div.row 和 .row 样式中的任何内容，只需将其放入 .container 样式中即可。哈哈

【解决方案2】：

尝试摆脱height: auto。两次调用 height 可能会导致问题。

【讨论】：