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属性的自我理解 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" > brother element div >
< div class ="youngbrother " > younger brother element div >
div >
< 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 >
< div style ="float:left" > This is a block element. div >
< 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. div >
< span style ="float:left; background-color:Gray;" > This is an inline element. span >
< 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. div >
body >
html >