the css property "clear" leaves a huge empty space

I am simply using a div of this nature to clear an area after floats:

.clear {
clear:both;
}

however, I am seeing it is causing a big space in my formatting and I'm not sure how to rid of it. what do you think may be happening?

开发者_如何学Go

thank you!

---

In case anyone else runs into this problem, the solution is to add this to the group's parent; that is the element that is causing the problems:

overflow: auto

i.e.:

<div style="overflow: auto">
   <div style="float: right">Testing</div>
   <div style="clear: both"></div>
</div>

---

Try to use a line height , it should fix the problem.

Is it happening only on IE , if so add line height

do something like this

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

---

I would just apply the clear: both attribute to the next content element (i.e. div) instead of creating an empty div (which I'm assuming that you are doing).

Demo: http://jsfiddle.net/wdm954/ArDhF/1/

---

I had the same problem with several small left-floating tables next to each other. The clear div afterwards took a lot of white space without having any height, nor padding or margin.

The solution: Wrap all tables within a div, then assign overflow-hidden to that div and (this is important) a value for the height.

E.g.

.tablecontainer {
    height: 70px;
    overflow: hidden;
}