html – 当float应用于其子元素时收缩

发布时间：2020-12-14 19:37:59 所属栏目：资源来源：网络整理

导读：我想在我的网站的主容器中创建一个元素容器.为了使元素容器成一行,我应用了float：left;给他们.但当我向他们添加浮动时,主容器缩小了！我尝试将clear应用于主容器,但没有任何变化. CSS： #main_container{ clear:both; margin-top:20px; padding:20px 10px 3

我想在我的网站的主容器中创建一个元素容器.为了使元素容器成一行,我应用了float：left;给他们.但当我向他们添加浮动时,主容器缩小了！我尝试将clear应用于主容器,但没有任何变化.

CSS：

#main_container
{
    clear:both;
    margin-top:20px;
    padding:20px 10px 30px 15px;
    background:#ccc;
}
.element_container
{
    float:left;
    width:238px;
    height:300px;
    border:1px solid #000;
}

HTML：

<div id="main_container">

    <div class="element_container"></div>

    <div class="element_container"></div>

    <div class="element_container"></div>

</div>

解决方法

尝试添加：

overflow: auto;

到#main_container

编辑：作为替代浮动清算方法,您可以使用：之后,如here所述.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!