With my love for ASP.NET front-end development, I looked at the float attribute this morning. To be honest, it is quite complicated.

Let me give you my example first. My self-understanding is all in this example. There are still some imperfections, the clear attribute is not put up.

< html >
< head >< title > float屬性的自我理解
< 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 ;
}

< script? type ="text/javascript" ?src ="JS/jquery-1.4.2-vsdoc.js" >
< 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; " );
????????});
????});


< body >
元素占用的空間有div塊級(jí)(block)，span行內(nèi)級(jí)(inline)之分。block，占用一行空間，撐滿父元素；inline，占用的空間僅僅是自身content padding border margin。 < br? />
要知道block,inline，都有float屬性，即浮動(dòng)。不設(shè)置浮動(dòng)屬性，默認(rèn)float為none。 < br? />
哥哥屬性設(shè)置浮動(dòng)后，其弟弟元素的內(nèi)容包圍哥哥元素，哥哥元素不再屬于父元素。 < br? />
弟弟元素設(shè)置浮動(dòng)后，對哥哥元素沒影響，但同樣不屬于父元素。 < br? />< br? />
< br />
< div class ="father" >
< div class ="oldbrother" > brother element
< div class ="youngbrother " > younger brother element

< div style =" clear:both;" >
< input type ="button" id =" nofloat" value ="Set the elder brother element to have no float" />< br />
< input type ="button" id ="nofloat1" value ="Set the elder brother element to have no float" /> ;
< input type ="button" id ="leftfloat1" value ="Set the element to left float" />
< input type ="button" id ="rightfloat1" value ="Set The brother element is floated to the right" />
< input type ="button" id ="Fumargin" value ="Set the margin attribute of the brother element to a negative number and float left" />< br />
< input type ="button" id ="leftfloat2" value ="Set the younger brother element to left float" />
< input type ="button" id ="rightfloat2" value ="Set the younger brother element Float right" />

< div style ="float:left" > This is a block element.
< div > This is a block-level element. This is a block level element. This is a block level element.
This is a block-level element. This is a block level element. This is a block level element. This is a block level element. This is a block level element. This is a block level element. This is a block level element. This is a block level element.

< span style ="float:left; background-color:Gray;" > This is an inline element.
< div style ="border:dotted 1px black" > This is a block-level element. This is a block level element. This is a block level element.
This is a block-level element. This is a block level element. This is a block level element. This is a block level element. This is a block level element. This is a block level element. This is a block level element. This is a block level element.