CSS float left / right clear problem: large space

Question

I have a css page with " float:right; clear:right " for declarations and a few blocks in the main text, which is intended to flow as an image, using "float: left". The problem is that the main text block has a large space: they only begin to appear after ad units that have float: right.

here is the test page: http://xahlee.org/js/ex/test_float.html

I do not understand this. Can someone explain?

Answer 1

I am struggling to think of better words to explain why, than "this is just how it works."

The easiest way to fix this is to enclose two “ad units” in your own div using float: right :

 <div style="float: right;"> <div class="adbox1">adbox1</div> <div class="adbox2">adbox2</div> </div> 

Answer 2

This gap is caused by your clear: on the right side of the second ad unit and the fact that stream packets follow the addresses in document order.

If you want the fields next to paragraphs to be placed in the lower “stream”, place them immediately before the paragraph tag that you want them to continue to float.

Answer 3

a gap created along the edge of the body;

Decision:

 body { margin: 0; } 

Most css reset tools have this rule.