使用clear:both时无法解释的空格

Question

我正在构建一个Joomla 1.7网站，并且我正在使用一个画廊插件。这真的很好，除了一个问题。在图库插件中，你可以在所有图片的顶部插入一个描述，但是每当我使用它的时候，我都会得到大量的空白。

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;">

如果我去掉空格，空白就会消失。我用firebug查看我的css，但我无论如何也弄不明白它为什么给我这个空格。我使用的是Yahoo css-reset。

编辑: CSS

div id="phocagallery“div”pg-class=-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

你必须在左边或右边有一个带有浮动元素的侧边栏(或者是浮动的)。

clear:both会使元素位于该浮动元素之下。

在这里看到问题：http://jsfiddle.net/9Razw/

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

Answer 2

类pg-category-view-desc可能会给出div浮动:left或float:right，并且它也有一个固定的高度，而clear应用于div高度

Answer 3

使用它

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