使用clear时无法解释的空白：两者兼而有之

Question

我正在建立一个Joomla 1.7网站，我正在使用一个图库插件。除了一个问题，这真的很好。在gallery插件中，您可以插入显示在所有图像之上的描述，但每当我使用它时，我都会获得大量的空白。

http://imgur.com/FGrGi

HTML：

<div id="phocagallery" class="pg-category-view" style="width:800px;margin: auto;">
   <div class="pg-category-view-desc">Pictures of the Roskilde Family</div>
   <div id="pg-icons"></div>
   <div style="clear:both"></div>
   <div class="phocagallery-box-file" style="height:158px; width:120px;">
   <div class="phocagallery-box-file" style="height:158px; width:120px;">
   <div class="phocagallery-box-file" style="height:158px; width:120px;">
   <div class="phocagallery-box-file" style="height:158px; width:120px;">
   <div class="phocagallery-box-file" style="height:158px; width:120px;">

如果我移除了白色空间消失。我用萤火虫看着我的css，但我不能为我的生活弄清楚为什么它给了我这个白色空间。我使用了Yahoo css-reset。

编辑：CSS

div id =“phocagallery”class =“pg-category-view”：

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, blockquote, th, td, p 
{
    margin: 0;
    padding: 0;
}
    body {
    color: #000000;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 75%;
    line-height: 1.3;
}

有人有线索吗？

Answer 1

你必须在左侧或右侧有一个侧边栏，里面有一个浮动元素（或者它自己浮动）。

清除：两者都导致元素在浮动元素下。

请在此处查看问题：http://jsfiddle.net/9Razw/

一种解决方案是在#phocagallery或overflow: hidden元素的父级上设置clear:both。

Answer 2

类pg-category-view-desc可能给div float：left或float：right，它也有一个固定的高度，clear应用div高度

Answer 3

使用它

.clear
{
  height:0px;
  clear:both;
}