float与position间的区别

float与position间的区别：
    个人理解为：脱离文档流不一定脱离文本流；但脱离文本流，则也脱离文档流。【如有更好的理解还望评论区一起探讨，共同学习进步】
一、float 浮动(脱离文档流，不脱离文本流)
    float的两种功能作用：
        a.元素脱离文档流，但不脱离文本流。(即：该元素区域浮动起来，但是处于元素里面的文本信息不会脱离文档)
        b.当行内元素使用float浮动时，类似于将该元素设置为行内块级元素，可以为其设置宽高并在一行显示。
    示例代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>浮动与定位小区别</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 200px;
                height: 200px;
            }
            .one{
                float: left;
                /*position: absolute;*/
                background: #bfe;
                margin-top: 40px;
            }
            .two{
                /*珊瑚色*/
                background: coral;
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
        <div class="two">浮动文档流测试</div>
    </body>
    </html>
View Code


二、position 定位(脱离文档流也脱离文本流)【相关position知识前面随笔有提及，这里使用absolute为例】
    position:absolute; 绝对定位；脱离文本流，不保留原来的位置空间。
    示例代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>浮动与定位小区别</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 200px;
                height: 200px;
            }
            .one{
                /*float: left;*/
                position: absolute;
                background: #bfe;
                margin-top: 40px;
            }
            .two{
                /*珊瑚色*/
                background: coral;
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
        <div class="two">相对定位文本流测试</div>
    </body>
    </html>
View Code


三、float 浮动  【父元素float浮动对子元素float浮动产生的影响】
    
    说明：当父元素定义为float时，其是脱离文档流的，但当其子元素再设置为float浮动时，子元素只会含有
    float的另一功能，将行内元素【内联元素】转化为行内块级元素，而且脱离文档流的特性不会显现出来。
    示例代码如下：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div style="width: 400px;height:200px;background:cyan;">
            <span style="float:left;width: auto;height:100%;background:coral;">
                <i style="background: #bfe;float: left;width: 100px;">hello world</i>
            </span>
        </div>
    </body>
    </html>
View Code

 

posted @ 2019-07-04 18:38  nzc  阅读(749)  评论(2)  编辑  收藏  举报