Clearing a float without extra vertical space
In almost all tests the clearing element is a div with "clear:both; height:0", its content and other properties vary.
In some tests it is a <br> with "clear:both; height:0" and ...
The green box is floated and is followed by a clearing element followed by a gray box. All is wrapped in a red box.
The clearing element has " " inside, and "font-size:1px; line-height:0"
This is a green floated box
This is a green floated box
Text following the float
This is a gray box after the clearing
The clearing element has a comment inside
This is a green floated box
This is a green floated box
Text following the float
This is a gray box after the clearing
The clearing element is empty, with "font-size:1px; line-height:0; overflow:hidden"
This is a green floated box
This is a green floated box
Text following the float
This is a gray box after the clearing
The clearing element is empty
This is a green floated box
This is a green floated box
Text following the float
This is a gray box after the clearing
The clearing element has a comment inside and generated content (for Moz 1.7-)
This is a green floated box
This is a green floated box
Text following the float
This is a gray box after the clearing
The clearing element is a br
This is a green floated box
This is a green floated box
Text following the float
This is a gray box after the clearing
With nothing between the float and the clear.
The clearing element has " " inside, and "font-size:1px; line-height:0" for IE only
This is a green floated box
This is a green floated box
This is a gray box after the clearing
The clearing element has a comment inside
This is a green floated box
This is a green floated box
This is a gray box after the clearing
The clearing element is empty, with "font-size:1px; line-height:0; overflow:hidden"
This is a green floated box
This is a green floated box
This is a gray box after the clearing
The clearing element is empty
This is a green floated box
This is a green floated box
This is a gray box after the clearing
The clearing element has a comment inside and generated content (for Moz 1.7-)
This is a green floated box
This is a green floated box
This is a gray box after the clearing
The clearing element is a br
This is a green floated box
This is a green floated box
This is a gray box after the clearing
Some of the last tests again with border-top:0.1px on the container (for Moz 1.7-)
The clearing element has a comment inside
This is a green floated box
This is a green floated box
This is a gray box after the clearing
The clearing element is empty, with "font-size:1px; line-height:0; overflow:hidden"
This is a green floated box
This is a green floated box
This is a gray box after the clearing
The clearing element is empty
This is a green floated box
This is a green floated box
This is a gray box after the clearing
The gray box is outside the container
The clearing element has " " inside, and "font-size:1px; line-height:0" for IE only
This is a green floated box
This is a green floated box
Text following the float
This is a gray box after the clearing
The clearing element has a comment inside
This is a green floated box
This is a green floated box
Text following the float
This is a gray box after the clearing
The clearing element is empty, with "font-size:1px; line-height:0; overflow:hidden"
This is a green floated box
This is a green floated box
Text following the float
This is a gray box after the clearing
The clearing element is empty
This is a green floated box
This is a green floated box
Text following the float
This is a gray box after the clearing
The clearing element has a comment inside and generated content (for Moz 1.7-)
This is a green floated box
This is a green floated box
Text following the float
This is a gray box after the clearing
The clearing element is a br
This is a green floated box
This is a green floated box
Text following the float
This is a gray box after the clearing
There is not a clearing element: generated cleared content, inline-block, hasLayout
This is a green floated box
This is a green floated box
Text following the float
This is a gray box after the clearing
There is not a clearing element: display table + inline-block
This is a green floated box
This is a green floated box
Text following the float
This is a gray box after the clearing
Some of the last tests again with border-bottom:0.1px on the container (for Moz 1.7-)
The clearing element has a comment inside
This is a green floated box
This is a green floated box
Text following the float
This is a gray box after the clearing
The clearing element is empty, with "font-size:1px; line-height:0; overflow:hidden"
This is a green floated box
This is a green floated box
Text following the float
This is a gray box after the clearing
The clearing element is empty
This is a green floated box
This is a green floated box
Text following the float
This is a gray box after the clearing
Empty Clears (Gecko 1.7- problem).
CSS tests home