123<div clss="out"> <div class="square"></div></div> 12345678910.square { width: 50%; overflow: hidden; /* BFC 划重点,防止容器与伪元素在垂直方向发生了外边距折叠 */}.square::after { content: ''; display: block; margin-top: 100%; /* margin 百分比相对父元素宽度计算 */}