求助：conteudo-container无法容纳两个子div的布局问题排查

问题描述 #

div「conteudo-container」无法容纳div「conteudo-principal」和「conteudo-lateral」，已计算尺寸（1820px + 180px = 2000px，父容器宽度2020px），理论上尺寸兼容，但子元素始终“溢出”父容器。相关代码如下：

CSS代码 #

body{
    font-family: "Trebuchet", Helvetica, sans-serif ;
    background: #f2f2f2;
}

#principal{   
    margin:0 auto;
    width:2220px;
    margin: 6px solid green;
}

#div-superior{
    width:2220px;
    padding-top:70px;
    padding-bottom:50px;    
    text-align:center;
    
}

#div-superior img:hover{
    border: 5px dashed #4d4d4d;
}

#conteudo-container{
    width:2020px;
    padding-top:50px;
    border: 2px dashed #01d3cc;
 }

#conteudo-principal{
    width:1820px;
    text-align:center;
    min-width:720px;
    float:left;
    
}

#conteudo-principal h2{
    color:#0953f3;
}

#conteudo-principal img:hover{
    border: 3px solid indigo;
    
}

#conteudo-lateral{
    float:right;
    width:180px;
     
}

#conteudo-lateral:hover{
    background-color:#fff1f2;
    color:#000000;
    font-size: 18px;
    
}

#conteudo-lateral h3{
    color:#72146d;
}

#navegacao-bar{
    border: 2px dashed crimson;
    width:180px;
    float:bottom;
    padding-bottom:20px;
  
}

#navegacao-bar a{
    text-decoration:none;
    
}

#navegacao-bar:hover{
    background:pink;
}


#rodape{
    padding-top:10px;
    height:20px;
    clear:both;
    background:#90c4d6;
    text-align:center;

}

HTML代码 #

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="C:\Users\Yuri\Documents\Workspace_Html\CSS - INTERMEDIARIO 3\Imagens-Liquidas-estilo-2.css">
        <title> IMAGENS LÍQUIDAS 2 </title>
    </head>
<body>
         
    <div id="principal">

         <div id="div-superior">
            <img src="https://media.istockphoto.com/photos/beautiful-looking-young-blonde-woman-with-the-middle-length-hair-in-picture-id1322686195?b=1&k=20&m=1322686195&s=170667a&w=0&h=Xnb8HCK8eBKophysfPBF0GzbMIyoQrz8Js6TwkCDMPY=" width="480" height="260">
               
            </div>
       
        <div id="conteudo-container">

            <div id="conteudo-principal">

                <h2>CONTEUDO PRINCIPAL</h2>

                    <img src="https://images.unsplash.com/photo-1589525231707-f2de2428f59c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8YXNpYW4lMjB3b21hbnxlbnwwfHwwfHw%3D&w=1000&q=80" width="480" height="260">

                
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Ut non tincidunt libero, quis porttitor tortor. 
                    Vestibulum tellus nibh, ultrices at sem sit amet, facilisis mollis justo. 
                    Phasellus nec nunc quis massa aliquam gravida. 
                    </p>
            
                    <img src="https://images.unsplash.com/photo-1589525231707-f2de2428f59c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8YXNpYW4lMjB3b21hbnxlbnwwfHwwfHw%3D&w=1000&q=80"  width="480" height="260">

            </div>
            
            <div id="conteudo-lateral">
                <h3>Título Conteúdo Lateral</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Ut non tincidunt libero, quis porttitor tortor. 
                    Vestibulum tellus nibh, ultrices at sem sit amet, facilisis mollis justo. 
                    Phasellus nec nunc quis massa aliquam gravida. 
                    </p>
                    
            </div>

        </div>
        
        <div id="navegacao-bar">
                <ul>
                    <li>
                    <a href="C:\Users\Yuri\Documents\Workspace_Html\CSS - INTERMEDIARIO 3\imagens-Liquidas-2.html">   home</a>
                    </li>
                    <li>
                    <a href="C:\Users\Yuri\Documents\Workspace_Html\CSS - INTERMEDIARIO 3\imagens-Liquidas-2.html"> Sobre</a>
                    </li>
                    <li>
                        <a href="C:\Users\Yuri\Documents\Workspace_Html\CSS - INTERMEDIARIO 3\imagens-Liquidas-2.html">Contato</a>
                    </li>
                    <li>
                        <a href="C:\Users\Yuri\Documents\Workspace_Html\CSS - INTERMEDIARIO 3\imagens-Liquidas-2.html">Informações</a>
                    </li>
                </ul>
        </div>

       
        <div id="rodape"> RODAPÉ </div>

    </div>

    

</body>

</html>

核心原因 #

1. 浮动元素脱离文档流：conteudo-principal和conteudo-lateral分别设置了float:left和float:right，浮动元素会脱离正常文档流，导致父容器conteudo-container无法感知子元素的高度，出现高度塌陷——视觉上父容器没有包裹子元素，看起来子元素“溢出”。
2. 潜在宽度溢出：虽然子元素总宽度（1820+180=2000px）小于父容器宽度（2020px），但HTML换行产生的空白字符会被解析为间距，可能导致子元素总宽度超过父容器，加剧溢出问题。

解决方案 #

方法1：触发BFC包裹浮动元素 #

给父容器conteudo-container添加overflow: hidden，触发BFC（块级格式化上下文），强制父容器包裹浮动子元素：

#conteudo-container{
    width:2020px;
    padding-top:50px;
    border: 2px dashed #01d3cc;
    overflow: hidden; /* 添加此行 */
 }

优点：代码简单；缺点：若子元素有需要溢出显示的内容（如下拉菜单），会被隐藏。

方法2：使用clearfix伪元素（推荐） #

通过伪元素在父容器末尾生成清除浮动的块级元素，既解决高度塌陷，又不影响溢出内容：

1. 在CSS末尾添加clearfix样式：

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

2. 给父容器添加clearfix类：

<div id="conteudo-container" class="clearfix">

方法3：改用Flex布局（现代方案） #

用Flex布局替代浮动，天然支持子元素排列，无需处理浮动问题：

1. 修改父容器的CSS：

#conteudo-container{
    width:2020px;
    padding-top:50px;
    border: 2px dashed #01d3cc;
    display: flex; /* 添加此行 */
    gap: 20px; /* 可选，设置子元素间距，替代空白字符影响 */
 }

2. 移除两个子元素的float属性：

#conteudo-principal{
    width:1820px;
    text-align:center;
    min-width:720px;
    /* float:left; 移除此行 */
}

#conteudo-lateral{
    /* float:right; 移除此行 */
    width:180px;
}

优点：布局灵活、易于维护，可轻松控制对齐、间距等样式。

内容的提问来源于stack exchange，提问作者Y.Monteiro