无法使div具有背景色

Question

我有以下html标记：

            <div id="com_loaded">
                <div id="com_loaded_userpic"><a href="#" class="tooltip"><img src="pic.jpg" class="img_poster" /><span>Username</span></a></div>
                <div id="com_loaded_content">
                    <div id="com_loaded_poster">Username</a></div>
                    <div id="com_loaded_text">Comment text</div>
                </div> 
            </div>

以及以下CSS标记：

 #com_loaded {
position: relative;
width: 250px;
padding: 0px;
clear: both;
background-color:#3FC;
 }

 #com_loaded_userpic {
position: relative;
width: 55px;
height: 60px;
float: left;
padding-left: 5px;
 }

 #com_loaded_content {
position: relative;
width: 185px;
float: left;
padding-left: 5px;
 }

 #com_loaded_poster {
position: relative;
width: 185px;
float: left;
clear: left;    
 }

 #com_loaded_text {
position: relative;
width: 185px;
float: left;
clear: left;
padding-bottom: 10px;
 }

容器com_loaded具有背景色。 但是不会显示此背景色。 当我给容器一个高度时，它会显示出来。 但是由于comment_text没有确定的高度（取决于注释的长度），所以我不想设置高度。

如何显示容器中所有div的容器背景色？ 我不知道我在做什么错...

Answer 1

浮动内容不会影响其容器的布局，因此包裹在浮动div上的任何项目都将没有高度，除非您明确设置（或除非有其他元素将其设置为高度）。 您可以通过在＃com-loaded的末尾添加<div style="clear:both;"></div>来更正此问题。