使用clear时无法解释空白：两者 [英] Unexplained white space when using clear:both

问题描述

我正在建立一个Joomla 1.7网站，我正在使用图库插件。这工作出真正好，除了一个问题。在图库插件中，你可以插入一个描述，显示在所有图像的顶部，但每当我使用这个，我得到了大量的空白。

一个解决方案是设置 c>清除：两个元素

的父项 overflow：hidden

I'm building a Joomla 1.7 website and I'm using a gallery plugin. This works out real nice except for one problem. In the gallery plugin you can insert a description that is displayed on top of all the images, but whenever I use this I get an enormous amount of whitespace.

http://imgur.com/FGrGi

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

If I remove the the white space disappears. I look in my css with firebug but I can't for the life of me figure out why it is giving me this white-space. I used the Yahoo css-reset.

EDIT: 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;
}

Anybody have a clue?

解决方案

You must have a sidebar on the left or the right with a floating element in it (or which is floating itself).

The clear:both causes the element to be under that floating element.

See the problem here: http://jsfiddle.net/9Razw/

One solution is to set overflow: hidden on #phocagallery or a parent of the clear:both element.

这篇关于使用clear时无法解释空白：两者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！