父 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/