为什么在 css 上应用浮动时 div 元素被压扁？

Question

这段代码有几个问题： 1. 第四个 div 似乎被压扁了。它的 height 比其他 div 小。 2. 容器的高度div 没有变成50%。我使用了 wv，但我不确定为什么 % 不起作用。

.container {
 background: blue;
 width: 75%;
 height: 50vw;
}


.box {
 width: 20%;
 background: #333;
 color: white;
 font-size: 25px;
 font-family: 'helvetica';
 border: 1px solid blue;
 margin: 2px;
 float: left;
 text-align: center;
}

#box4 {
 width: 20%;
 background: #333;
 color: white;
 font-size: 25px;
 font-family: 'helvetica';
 border: 1px solid blue;
 margin-top: 2px;
 text-align: center;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="index.css">
  <title>prac</title>
</head>
<body>
  <div class="container">
    <div id="one" class="box">
      <p>One</p>
    </div>
    <div id="two" class="box">
      <p>Two</p>
    </div>
    <div id="three" class="box">
      <p>Three</p>
    </div>
    <div id="box4">
      <p>four</p>
    </div>
  </div>
</body>
</html>

Answer 1

您的第四个元素正在被压缩，因为您 float 前三个元素到 left，但没有 'reset' float。这可以通过 clearfix:

来实现

#box4:before {
  content: "";
  display: table;
  clear: both;
}

.container {
  background: blue;
  width: 75%;
  height: 50vw;
}

.box {
  width: 20%;
  background: #333;
  color: white;
  font-size: 25px;
  font-family: 'helvetica';
  border: 1px solid blue;
  margin: 2px;
  float: left;
  text-align: center;
}

#box4:before {
  content: "";
  display: table;
  clear: both;
}

#box4 {
  width: 20%;
  background: #333;
  color: white;
  font-size: 25px;
  font-family: 'helvetica';
  border: 1px solid blue;
  margin-top: 2px;
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="index.css">
  <title>prac</title>
</head>

<body>
  <div class="container">
    <div id="one" class="box">
      <p>One</p>
    </div>
    <div id="two" class="box">
      <p>Two</p>
    </div>
    <div id="three" class="box">
      <p>Three</p>
    </div>
    <div id="box4">
      <p>four</p>
    </div>
  </div>
</body>

</html>

至于为什么你不能在 .container 上使用 %，这是因为基于百分比的单位从直接父级继承它们的值（并向上链接），但是 <body> 没有固定的 height 定义。您需要在父项上计算 height，以便子项能够计算自己的 height 作为百分比。

为什么在 css 上应用浮动时 div 元素被压扁？

Why is the div element being squished when applying floats on css?

css-float