为什么那个边框没有掩盖它的内容

Question

我在这里分享一支笔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>

Answer 1

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

Answer 2

那是因为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>

为什么那个边框没有掩盖它的内容

Why does that border not covering up its contents

html

css

frontend

border

css-float