抱着对asp.net前台开发的热爱，今天上午特别看了float属性，说实话还挺复杂。
先把我的例子放上来，自我理解都在这个例子里了。还有些不完美之处就是，clear属性没放上来。
float属性的自我理解 title >
.father
{
    background-color : #fffea6 ;
    border : 1px solid #111111 ;
    padding : 25px ;
}
.oldbrother
{
    padding : 10px ;
    margin : 5px ;
    background-color : #70baff ;
    border : 1px dashed #111111 ;
    float : none ;
}
.youngbrother
{
    padding : 5px ;
    margin : 0px ;
    background-color : #ffd270 ;
    border : 1px dashed #111111 ;
}
style >
script >
$( function () {
        $( #nofloat ).click( function () {
            $( .oldbrother ).attr( style ,  float:none; );
            $( .youngbrother ).attr( style ,  float:none );
        });
        $( #leftfloat1 ).click( function () {
            $( .oldbrother ).attr( style ,  float:left; );
        });
        $( #rightfloat1 ).click( function () {
            $( .oldbrother ).attr( style ,  float:right; );
        });
        $( #nofloat1 ).click( function () {
            $( .oldbrother ).attr( style ,  float:none; );
        });
        $( #fumargin ).click( function () {
            $( .oldbrother ).attr( style ,  float:left;margin:5px 0 0 -35px; );
        });
        $( #leftfloat2 ).click( function () {
            $( .youngbrother ).attr( style ,  float:left; );
        });
        $( #rightfloat2 ).click( function () {
            $( .youngbrother ).attr( style ,  float:right; );
        });
    });
script >
head >
元素占用的空间有div块级(block)，span行内级(inline)之分。block，占用一行空间，撑满父元素；inline，占用的空间仅仅是自身content+padding+border+margin。
要知道block,inline，都有float属性，即浮动。不设置浮动属性，默认float为none。
哥哥属性设置浮动后，其弟弟元素的内容包围哥哥元素，哥哥元素不再属于父元素。
弟弟元素设置浮动后，对哥哥元素没影响，但同样不属于父元素。
哥哥元素 div >
弟弟元素 div >
div >
div >
这是block元素。 div >
这是块级元素。这是块级元素。这是块级元素。
这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。 div >
这是inline元素。 span >
这是块级元素。这是块级元素。这是块级元素。
这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。 div >
body >
html >
当然，提供下载。 /files/samwu/float属性的自我理解.rar