HTML>Proficient in CSS DIV web page style and layout>Understanding CSS positioning and DIV layout>Self-understanding of float attributes_html/css_WEB-ITnose

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.

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。
哥哥属性设置浮动后，其弟弟元素的内容包围哥哥元素，哥哥元素不再属于父元素。
弟弟元素设置浮动后，对哥哥元素没影响，但同样不属于父元素。


brother element div >
younger brother element div >
div >







div >
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. div >

This is an inline element. span >
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 >

Of course, downloading is provided. /Files/samwu/Self-understanding of float attributes.rar