HTML>精通CSS DIV网页样式与布局>理解CSS定位和DIV布局>float属性的自我理解

抱着对ASP.NET前台开发的热爱，今天上午特别看了float属性，说实话还挺复杂。

先把我的例子放上来，自我理解都在这个例子里了。还有些不完美之处就是，clear属性没放上来。

 

< html >
< head >< title > float属性的自我理解 </ title >
< style  type ="text/css" >
.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  type ="text/javascript"  src ="JS/jquery-1.4.2-vsdoc.js" ></ script >
< script  type ="text/javascript" >
    $( 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 >
< body >
元素占用的空间有div块级(block)，span行内级(inline)之分。block，占用一行空间，撑满父元素；inline，占用的空间仅仅是自身content+padding+border+margin。 < br  />
要知道block,inline，都有float属性，即浮动。不设置浮动属性，默认float为none。 < br  />
哥哥属性设置浮动后，其弟弟元素的内容包围哥哥元素，哥哥元素不再属于父元素。 < br  />
弟弟元素设置浮动后，对哥哥元素没影响，但同样不属于父元素。 < br  />< br  />
< br  />
< div  class ="father" >
< div  class ="oldbrother" > 哥哥元素 </ div >
< div  class ="youngbrother" > 弟弟元素 </ div >
</ div >
< div  style =" clear:both;" >
< input  type ="button"  id ="nofloat"  value ="设置哥哥弟弟元素为无浮动"   />< br  />
< input  type ="button"  id ="nofloat1"  value ="设置哥哥元素为无浮动"   />
< input  type ="button"  id ="leftfloat1"  value ="设置哥哥元素为左浮动"   />
< input  type ="button"  id ="rightfloat1"  value ="设置哥哥元素为右浮动"   />
< input  type ="button"  id ="Fumargin"  value ="设置哥哥元素的margin属性为负数，左浮动"   />< br  />
< input  type ="button"  id ="leftfloat2"  value ="设置弟弟元素为左浮动"   />
< input  type ="button"  id ="rightfloat2"  value ="设置弟弟元素为右浮动"   />
</ div >
< div  style ="float:left" > 这是block元素。 </ div >
< div > 这是块级元素。这是块级元素。这是块级元素。
这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。 </ div >

< span  style ="float:left; background-color:Gray;" > 这是inline元素。 </ span >
< div  style ="border:dotted 1px black" > 这是块级元素。这是块级元素。这是块级元素。
这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。 </ div >

</ body >
</ html >

当然，提供下载。 /Files/samwu/float属性的自我理解.rar