父div不包括所有孩子

Question

我有一个内容div，它有一个标头div，其中包含另外两个div，然后是不在标头中但在内容中的最终div。 但是，看起来内容的最后一个子div实际上没有包含在内容中。

这是CSS：

div.outline {border: 1px solid red;}
#content{background-color:tan;}
#container{width:680px;overflow:hidden;}
#header{margin-bottom:10px; background-color:yellow;}
#title{float:left;}
#link{float:right;}
.clear_it{clear:both;}
#chooser{float:left; margin-right:20px}
#renamer{padding-left:20px;}
#img{width:170px;height:130px;border:1px solid rgb(192,192,192);float:left;margin-left:20px;margin-top:20px;}

这是HTML：

<div id="container">
    <div id="header">
        <div id="title">Header Title</div>
        <div id="link" style="float:right;">
            <a href="http://www.apple.com" target="_blank">Link</a>
        </div>
        <div class="clear_it"></div>
    </div>

    <div id="content">
        <div id="content_header">
            <div id="chooser">
                <select>
                    <option value="1">This is a fairly long option</option>
                    <option value="2">short</option>
                </select>
            </div>
            <div id="renamer">
                <a href="http://apple.com" target="_blank">Link</a>
            </div>
        </div>
        <div class="clear_it"></div>
        <div id="img"></div>
    </div>
</div>

结果如下：

Answer 1

我建议您使用一种不涉及任何清除div的浮动方法来清除浮点数（从而完全清除clear_it ）。 只需添加overflow: auto或overflow: hidden到包含浮动元素的容器中：

#content { overflow: auto; }
#container { overflow: auto; }
#content-header { overflow: auto; }

新的HTML：

<div id="container">
    <div id="header">
        <div id="title">Header Title</div>
        <div id="link" style="float:right;">
            <a href="http://www.apple.com" target="_blank">Link</a>
        </div>
    </div>

    <div id="content">
        <div id="content_header">
            <div id="chooser">
                <select>
                    <option value="1">This is a fairly long option</option>
                    <option value="2">short</option>
                </select>
            </div>
            <div id="renamer">
                <a href="http://apple.com" target="_blank">Link</a>
            </div>
        </div>
        <div id="img"></div>
    </div>
</div>

新CSS：

div.outline {border: 1px solid red;}
#content{background-color:tan; overflow: auto;}
#container{width:680px;overflow:auto;}
#header{margin-bottom:10px; background-color:yellow; overflow: auto;}
#title{float:left;}
#link{float:right;}
#content_header { overflow: auto; }
#chooser{float:left; margin-right:20px}
#renamer{padding-left:20px;}
#img{width:170px;height:130px;border:1px solid rgb(192,192,192);float:left;margin-left:20px;margin-top:20px;}

请参阅： http ： //jsfiddle.net/Wexcode/g7MkN/

Answer 2

尝试将div.img放在div.clear_it上方

<div id="img"></div>
<div class="clear_it"></div>

Answer 3

您需要清除浮动。 由于您的<div id="img"></div>浮动在左侧，因此在clear_it div之后的clear_it

看看这个有什么帮助

Answer 4

您的问题是您的子元素处于浮动状态，而父元素处于未浮动状态。 在这种情况下，子级尽管由父级包含，但不会与之“对齐”，因为它们不在同一“定位”层次结构中。

我已经建立了一个JSFiddle： http : //jsfiddle.net/M2pMh/6/

注意使用浮点数。 您可以玩这个游戏（如上面的答案），以获得所需的结果。

通过将图像div移到内容下方的区域中并向左浮动，同时调整其他元素的大小以填充其父元素（并浮动），img现在将位于标题和内容下方。

Answer 5

您的问题不清楚。

您是否希望棕褐色背景一直延伸到图像？

用这个：

#content{ overflow:auto; }