css - 溢出实际上是如何在这里工作的？

Question

我有一个中央 div，它根据导航栏中选择的选项卡具有不同的内容长度。我给了 div 一个最小高度，希望它根据内容长度进行相应调整。我还将高度属性设置为自动。这没有用。但是添加 overflow:hidden 解决了这个问题。我真的不明白这实际上是如何工作的。

任何帮助将不胜感激

.central{
width: 70%;
min-height: 700px;
height: auto;
margin: 20px auto;
background-color: #FFFFFF;
border-radius: 5px;
box-shadow: 2px 2px 20px -5px #CFCFCF, -2px -2px 20px -5px #CFCFCF;
overflow: hidden;
}

编辑:抱歉，如果我无法正确解释我的问题。没有overflow:hidden发生的事情是中央div内的内容流出div，但在使用它之后中央div的高度似乎已被调整以容纳内容。相关的css和markup如下——

.central{
width: 70%;
min-height: 700px;
height: auto;
margin: 20px auto;
background-color: #FFFFFF;
/*border: 1px solid #C6C6C6;*/
border-radius: 5px;
box-shadow: 2px 2px 20px -5px #CFCFCF, -2px -2px 20px -5px #CFCFCF;
overflow: hidden;
}

.main_content{
width: inherit;
height: inherit;
}

.main_content img{
max-width: 100%;
height: auto;
}

#content1{
margin: 20px;
}

.img{
width: 25%;
height: 25%;
margin: 20px;
float: left;
}

.desc{
width: 65%;
height: auto;
min-height: 650px;
float: left;
overflow: hidden;
margin-top: 20px;
font-family: 'Aleor';
font-size: 100%;
}

.desc p:last-child{
padding-bottom: 30px;
}

HTML

<div class="central">
    <section id="content1">
        <div class="main_content">
            <article class="img"><img src="profile.jpg"/></article>
            <section class="desc">
                <p>The content</p>
            </section>
        </div>
    </section>
</div>

Answer 1

也评论了这个。

您可能有导致问题的 float 元素。您可以使用 overflow: auto 修复它。

通过使用它，容器可以识别出其中有元素。

更新

检查 demo关于 overflow:auto 如何处理 float 子项。