float basic

A floated box can either be shifted to the left or the right until its outer edge touches the edge of its containing box, or another floated box. Because floated boxes aren’t in the normal flow of the document, block boxes in the regular flow of the document behave as if the floated box wasn’t there. But the space taken the repositioned element can not be used by other elements.

overflow:auto hack

float will take element out of its flow layout, which means the original position if not floated is taken out. So if all content of a container is floated, the container contains nothing , so it's height/width is zero. To overcome this, you either float the element or add overflow:auto. Overflow is a hack and seems to be better choice. Because the container will expand as much as can. If you choose the float the container, you much specify the width to 100%, in some case, this also cause problem. Because if the container has padding, margin or border, the width is over 100%, because the actual width is add up of all.

Relative vs Absolute position

        <p>Positioned element are the elements with relative or absolute setting value for the position style. Non-positioned element are the element without these value for the position style.Left/Right style can be used together to with positioned elements to control their position, but they have no effect for non-positioned elements.</p>

setting the height of line box

Element like span is inline element. Their horizontal spacing can be adjusted using horizontal padding, border, and margin. However, vertical pading, border, margins will have no effect on the height of an line box.But you can use line-height to change the height of this box.

Sys.UI.Control

Conceptually, a control differs from a behavior in the sense that instead of just providing client functionality, a control usually represents or wraps the element, to provide additional properties and methods that extend its programming interface.