如何仅用HTML制作多div布局？遇重叠问题求助

首先明确：仅靠纯HTML（完全不使用任何CSS）无法实现你想要的布局，因为HTML只负责定义页面结构，布局、位置、尺寸这类样式控制必须依赖CSS。你说的“不使用外部CSS文件”是可以做到的——可以用HTML内置的<style>标签（内部样式表）或者div的style属性（内联样式）来写CSS，不用单独的.css文件。

下面针对你遇到的div重叠问题，给两种可行的实现方案，都不需要外部CSS文件：

方案1：使用Flex布局（推荐，代码简洁易维护） #

Flex是现代布局方式，能轻松解决重叠问题，代码示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            gap: 10px; /* 控制div之间的间距 */
            padding: 10px;
        }
        .box {
            width: 150px;
            height: 150px;
            background-color: #eee;
            border: 1px solid #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">盒子1</div>
        <div class="box">盒子2</div>
        <div class="box">盒子3</div>
    </div>
</body>
</html>

方案2：使用Float+Clear（兼容旧浏览器的传统方式） #

如果不想用Flex，也可以用float布局，但需要处理清除浮动避免重叠，代码示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            overflow: hidden; /* 清除内部浮动，避免容器高度塌陷 */
            padding: 10px;
        }
        .box {
            width: 150px;
            height: 150px;
            background-color: #eee;
            border: 1px solid #ccc;
            float: left;
            margin-right: 10px; /* 控制间距 */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* 最后一个盒子去掉右边距 */
        .box:last-child {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">盒子1</div>
        <div class="box">盒子2</div>
        <div class="box">盒子3</div>
    </div>
</body>
</html>

补充说明 #

你之前用float和position出现重叠，大概率是没处理好浮动清除（float布局需要父容器清除浮动，否则容器高度塌陷，后续元素会往上跑），或者position使用时没设置正确的定位属性（比如用absolute定位时需要给父容器设relative，否则会相对于整个页面定位）。

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