Div容器显示异常求助：Div3与Div6重叠且Div3意外显示

问题描述 #

我试图将div4、div5、div6这三个div放入div3中，让div3作为它们的容器，但目前div3和div6出现重叠，页面上同时显示“Test3”和“Test6”。我需要隐藏“Test3”，尝试过flex布局（结果元素全部移出容器）、修改div6的float属性等方法都无效，教授称问题出在浏览器，求解决办法。

原代码如下：

<!DOCTYPE html>
<html>

<head>
<style>
    #div1 {
        background-color: blue;
        width: 60%;
        height: 400px;
        text-align: center;
        margin: auto;
    }

    #div2 {
        background-color: red;
        width: 90%;
        height: 300px;
        text-align: center;
        margin: auto;
    }

    #div3 {
        background-color: gray;
        width: 95%;
        height: 200px;
        text-align: center;
        margin: auto;
    }

    #div4 {
        background-color: yellow;
        width: 20%;
        height: 100%;
        text-align: center;
    float:left;
    }

    #div5 {
        background-color: green;
        width: 40%;
        height: 100%;
        text-align: center;
    float:left;
    }

    #div6 {
        background-color: purple;
        width: 40%;
        height: 100%;
        text-align: center;
    float:left;
    }

</style>
</head>

<body>

    <div id="div1">test 1
    <div id="div2">test 2
    <div id="div3">test 3
    <div id="div4">test 4</div>
    <div id="div5">test 5</div>
    <div id="div6">test 6</div>
    </div>
    </div>
    </div>

</body>
</html>

原因分析 #

• 重叠问题：div4、div5、div6都设置了float: left，浮动元素会脱离标准文档流，导致div3的文本“test3”和浮动的div6在布局上重叠。即使div3设置了固定高度，浮动元素也不占据容器的文档流空间，所以文本会和浮动元素重叠。
• 隐藏“test3”需要针对该文本做精准处理，直接修改容器样式无法实现。

解决方案 #

1. 解决重叠问题：给div3添加清除浮动的样式，让容器正确包裹浮动子元素。最简单的方法是给#div3加上overflow: hidden;，容器会自动包含内部浮动元素，避免文本与子元素重叠。
2. 隐藏“test3”文本：将“test3”放入<span>标签，给该span设置display: none;，既保留结构又隐藏文本。

完整修改后的代码 #

<!DOCTYPE html>
<html>

<head>
<style>
    #div1 {
        background-color: blue;
        width: 60%;
        height: 400px;
        text-align: center;
        margin: auto;
    }

    #div2 {
        background-color: red;
        width: 90%;
        height: 300px;
        text-align: center;
        margin: auto;
    }

    #div3 {
        background-color: gray;
        width: 95%;
        height: 200px;
        text-align: center;
        margin: auto;
        overflow: hidden; /* 清除浮动，包裹子元素 */
    }

    .hide-text {
        display: none; /* 隐藏test3文本 */
    }

    #div4 {
        background-color: yellow;
        width: 20%;
        height: 100%;
        text-align: center;
        float:left;
    }

    #div5 {
        background-color: green;
        width: 40%;
        height: 100%;
        text-align: center;
        float:left;
    }

    #div6 {
        background-color: purple;
        width: 40%;
        height: 100%;
        text-align: center;
        float:left;
    }

</style>
</head>

<body>

    <div id="div1">test 1
    <div id="div2">test 2
    <div id="div3"><span class="hide-text">test 3</span>
    <div id="div4">test 4</div>
    <div id="div5">test 5</div>
    <div id="div6">test 6</div>
    </div>
    </div>
    </div>

</body>
</html>

替代清除浮动方法（伪元素法，适合复杂布局） #

如果不想用overflow: hidden，可以给div3添加伪元素清除浮动：

#div3::after {
    content: "";
    display: table;
    clear: both;
}

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