clear:both

As I’m a newbie in coding CSS, so I use this blog to record any problem I’ve encountered, and most of time, the title is how I resolved it.




Problem:
now I want to create a form-like div:
<style type="text/css">
.test{
display : block;
}
.left {
float : left;
}
.right {
float : right;
}
#test {
width : 300px;
}
</style>

<div id="test">
<div class="test">
<label class="left">Test1</label>
<input type="text" class="right"/>
</div>
<div class="test">
<label class="left">Test2</label>
<textarea type="text" class="right"></textarea>
</div>
<div class="test">
<label class="left">Test3</label>
<input type="text" class="right"/>
</div>
</div>

what I want is each pair of label and input stay in one line. but using the above code, I got a ugly view. all the labels and inputs are in one line, other than in three lines. but I’ve already used display:block, that’s what I know used to clear the whole line, apparently, it doesn’t work here.

JQuery UI:
then I remeber that jquery ui provides a CSS class ‘ui-help-clearfix’, so I add it to my code like this:
<div class="test ui-help-clearfix”>
<label class="left">Test1</label>
<input type="text" class="right"/>
</div>
this really works, why!

from firebug(firefox add-on), I found that ui-help-clearfix is the same as my CSS class ‘test’:
.ui-help-clearfix{
display : block;
}
then I checked the jquery ui code, found the following code:
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
I think what makes it work is the persudo-class ‘:after’. so I comment ‘.ui-helper-clearfix:after’, then the view got ugly again. the pesudo-class ‘:after’ is used to add content after the given selector. then I deleted ‘visibility: hidden;’ from ‘.ui-helper-clearfix:after’, and change height to 10px, so that I can see what added. I think you already know what added, just a dot ‘.’, :). and jquery ui hide the dot. after several test by deleting each CSS property, you can find that ‘clear:both’ helps to eliminate other tags shown in the same line, so I add ‘clear:both’ to my CSS class ‘test’, then everything works fine.

others:
another point is firebug cannot show the content added by pesudo class ‘:after’.

but why jquery ui uses ‘.ui-helper-clearfix:after’ to clear everything other than add ‘clear:both’ to ‘.ui-helper-clearfix’, emmm.... thinking.....