< div>当浮子应用于其子元件时收缩 [英] <div> shrinks when float is applied to its sub elements

问题描述

我想在我的网站的主容器中创建一个元素容器。为了使元素容器在一行，我应用 float：left; 。但是当我向它们添加 float 时，主容器收缩！我尝试对主容器应用 clear：both ，但没有任何变化。

I am trying to make an element container within the main container of my website. To make the element container in a line, I applied float:left; to them. But when I added float to them,the main container shrinks! I tried applying clear:both to the main container, but nothing changes.

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

EDIT：作为替代的浮动清除方法，您可以使用：after，如这里。

As an alternative float clearing method you can use :after, as explained here.

这篇关于< div>当浮子应用于其子元件时收缩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！