Home > Web Front-end > HTML Tutorial > 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

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

WBOY
Release: 2016-06-24 12:30:34
Original
1019 people have browsed it

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块级(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 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.



Of course, downloading is provided. /Files/samwu/Self-understanding of float attributes.rar
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template