.square {
  width: 50%;
  overflow: hidden; /* BFC 划重点，防止容器与伪元素在垂直方向发生了外边距折叠 */
}

.square::after {
  content: '';
  display: block;
  margin-top: 100%; /* margin 百分比相对父元素宽度计算 */
}