HTML+CSS页面布局求助：解决元素重叠并实现指定分栏布局

你的代码存在语法错误和布局逻辑问题，导致下方盒子覆盖顶部内容，以下是具体修复方案：

1. 修正CSS语法错误 #

• 所有CSS属性必须以分号;结尾，你的.child-one、.child-two、.child-three的width属性后均缺失分号
• min-height属性写法错误，将冒号:写成了双引号"，需改为min-height: 数值px;格式
• .button-style中的size是无效属性，替换为font-size:12px;；padding:none改为padding:0;（none不是合法的padding取值）
• .box-design的width: 100 %需去掉空格，改为width:100%;

2. 解决浮动导致的布局重叠 #

子元素使用float会脱离文档流，导致父容器.box-design高度塌陷，进而引发和顶部容器的布局重叠。推荐改用更易维护的Flexbox布局替代float：

• 给.box-design设置display: flex;，移除子元素的float属性
• 保持子元素宽度比例（50%+25%+25%），确保总宽度为100%

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<style>
.students-page-container{
    display: flex;
    align-items:center;
    justify-content:space-between;
    padding: 1rem 2rem; /* 增加内边距，避免顶部栏与下方盒子紧贴 */
}
.label-style{
    font-weight:600;
    font-family:'sans-serif';
    font-size:24px;
    align-items: center;
    color: black;
    line-height:28.8px;
    display:flex;
}
.button-style{
    border:none;
    background:none;
    padding:0;
    font-weight:400;
    font-size:12px;
    line-height:14.4px;
    cursor: pointer; /* 提示按钮可点击 */
}
.box-design{
    width: 100%;
    background-color: gray;
    display: flex; /* 改用Flexbox布局 */
}
.child-one{
    width: 50%;
    min-height: 400px;
    background-color:white;
}
.child-two{
    width: 25%;
    min-height: 200px;
    background-color:white;
}
.child-three{
    width: 25%;
    min-height: 200px;
    background-color:white;
}
</style>
</head>
<body>
<!-- Top Row Container-->
<div class="students-page-container">
    <div class="label-style">
        <span> student number: &nbsp; 92837293</span>
    </div>
    <div>
        <button class="button-style">
            <u> all students</u>
        </button>
    </div>
</div>
<!-- for the boxes -->
<div class="box-design">
    <div class="child-one">
        <p> Student Name: &nbsp; mike jordan</p>
        <!-- 可添加更多内容 -->
        <hr>
        <p></p>
    </div>
    <div class="child-two">
        <p> Alerts</p>
    </div>
    <div class="child-three">
        <p> Contact Details</p>
    </div>
</div>
</body>
</html>

额外优化说明 #

• 给.students-page-container添加padding，优化顶部栏的视觉间距
• 修正了拼写错误Studnt为Student
• 给按钮添加cursor: pointer，提升交互体验

内容的提问来源于stack exchange，提问作者Donald