关于css float 属性以及position:absolute 的区别。

时间 2019-11-24

标签关于 css float 属性以及 position absolute 区别栏目 CSS 繁體版

原文原文链接

1.float 属性定义元素在哪一个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素均可以浮动。浮动元素会生成一个块级框，而不论它自己是何种元素。div一个典型的块级元素，会单独占据一行。css

先看看最基本的块级元素如何排列的。html代码，如下样式都是基于此。html

<div class="boxBg">
        <div class="box1">
        框框1
        </div>
        <div class="box2">
        框框2
        </div>
        <div class="box3">
        框框3
        </div>
</div>

css代码：浏览器

.boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc
    }
    .box1{
    width:100px;
    height:50px;
    background-color:red
    }
    .box2{
    width:100px;
    height:50px;
    background-color:blue
    }
    .box3{
    width:100px;
    height:50px;
    background-color:green
    }

执行结果：布局

因为div是块级元素，因此框会以纵向形式排列。在实际操做中每每须要将框横向排列。有两种方式能够实现。第一种将display:inlin-block;学习

.boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc
    }
    .box1{
    width:100px;
    height:50px;
    background-color:red;
    display:inline-block
    }
    .box2{
    width:100px;
    height:50px;
    background-color:blue;
    display:inline-block
    }
    .box3{
    width:100px;
    height:50px;
    background-color:green;
    display:inline-block
    }

执行结果：ui

至于中间的缝隙，追溯到本质缘由是元素之间的空白符引发的，因此在父元素设置fone-size的大小，能够调节空白缝隙的大小。spa

.boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc;
    font-size:34px;
}

将font-size:34px以后，那么缝隙会变宽。3d

执行结果：code

同理，要去掉缝隙，那么须要将font-size:0;htm

.boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc;
    font-size:0
}

执行结果：

如此便实现了想要的布局，框里边的文字也跟着消失了，一样也证实文字的大小影响缝隙。只须要在子元素里从新设置就能够了。固然今天的重点并非这个。一样的效果float:left;也能够轻松实现。

<style>
    .boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc;
    }
    .box1{
    width:100px;
    height:50px;
    background-color:red;
    float:left
    }
    .box2{
    width:100px;
    height:50px;
    background-color:blue;
    float:left
    }
    .box3{
    width:100px;
    height:50px;
    background-color:green;
    float:left
    }
</style>

执行结果：

元素添加 float以后，此浮动元素会在其碰到父级元素边框或者另外一个浮动元素边框，紧邻其后显示。例以下边的例子，在浮动元素总宽度大于父级元素时，换行，换行的时候遇到前一个float并在其后显示

    <style>
    .boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc;
    }
    .box1{
    width:100px;
    height:100px;
    background-color:red;
    float:left
    }
    .box2{
    width:100px;
    height:50px;
    background-color:blue;
    float:left
    }
    .box3{
    width:400px;
    height:50px;
    background-color:green;
    float:left
    }
</style>

执行结果：

若是使用inline-block,结果会是怎样呢？

  <style>
    .boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc;
    }
    .box1{
    width:100px;
    height:100px;
    background-color:red;
    display:inline-block
    }
    .box2{
    width:100px;
    height:50px;
    background-color:blue;
    display:inline-block
    }
    .box3{
    width:400px;
    height:50px;
    background-color:green;
    display:inline-block
    }
</style>

执行结果：

此时框3是另起一行而不是跟在框1以后，(1,2之间的缝隙这里就不说了) 这也是一个使用inline-block和float的判断，若是模块宽度不同使用float排版可能会致使跟预想结果不同，因此在宽高不变的状况下使用float是极好的，若是不一致的话须要看具体的布局，使用恰当的属性。

如下贴代码，只贴修改的部分，其余不变，结构不变。

若是去掉box3的float：left会是什么结果？按照理解，浮动元素不占据空间，也就是框框3会无视框框1，框框2直接紧邻父元素的边框显示，也就是框框1会盖住框框3?那结果呢？

.box3{
    width:100px;
    height:50px;
    background-color:green;
}

执行结果：

为什么框3的文字会出如今下边而不是被框1覆盖？接着看代码，看图

.box3{
    height:50px;
    background-color:green;
}

执行结果：

看出不同了没？是的。box3没有定义width;去掉了width,不定义宽度的状况下默认宽度就是父元素的宽度，也就是说此时width:500px;浮动元素覆盖非浮动元素，也就是框3前边200px的宽度被浮动元素覆盖了，之因此文字没有被覆盖并且文字被浮动元素挤在200px以后的位置，缘由呢？

浮动元素不会占据块的空间，因此框三就是100%的父容器宽度 500px，可是浮动元素会占据另外的空间，也就是行框空间，通俗的讲就是文本所占的空间。

这也是图片float以后，文本会自动环绕图片的缘由。浮动元素不占据块级空间，但会影响块级元素以内的文字以及内联元素。

如此的话若是想要三个框宽度同样，那么只须要将框三width:300px;

.box3{
    width:300px;
    height:50px;
    background-color:green;
}

执行结果：

到这里基本的浮动说完了，那就要说说问题了，浮动虽然好用，可是也会在实际中出现不少问题。例如：

  <style>
    .boxBg{
    margin: 0 auto;
    position:relative;
    width:500px;
    border:2px solid #ccc;
    background-color:#ccd;
    }
    .box1{
    float:left;
    width:100px;
    height:50px;
    background-color:red;
    }
    .box2{
    float:left;
    width:100px;
    height:50px;
    background-color:blue;
    }
    .box3{
    float:left;
    width:100px;
    height:50px;
    background-color:green;
    }
</style>

执行结果：

很常见的问题，正常状况下。应该灰色的背景会跟框同样高，可事实老是不会尽如人意 :)

这种状况产生的缘由，都知道是由于浮动形成的，是的，是浮动，不少地方有说浮动元素会脱离普通流，因此普通元素能够当浮动元素不存在，因此这里就不会撑开背景了，可是认真看的同窗，必定会记得上边有提到浮动元素不会影响块框，可是会影响行框，也就是文字或内联元素，不论是块级元素仍是内联元素都属于普通流，若是浮动元素脱离普通流又为什么会影响行框？其实我以为没必要要纠结于这些概念性的东西。按照个人理解浮动元素就是跟块级元素不在一个水平空间，跟文字内联元素在一个空间，因此这里边框就至关于在背景之上，因此不会影响背景元素，日常所说的清除浮动，并非说把浮动元素的float属性去掉，而是清除其周围的浮动元素，使其自身周围没有浮动元素，因此若是想让框三到第二行，不能在框2里边用clear:right;而是须要在框3里边使用clear:left;

.box3{
    float:left;
    width:100px;
    height:50px;
    background-color:green;
    clear:left
    }

执行结果：

ok!理解了这个，下来再说说如何使背景和框等高，第一种：最直接的办法就是直接设置背景高度和框相等就Ok了，固然这个不是重点，下面来讲说清除浮动。首先先看看例子：

<!DOCtype>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <style>
    .boxBg{
    margin: 0 auto;
    position:relative;
    width:500px;
    border:2px solid #ccc;
    background-color:#ccd;
    }
    .box1{
    float:left;
    width:100px;
    height:50px;
    background-color:red;
    }
    .box2{
    float:left;
    width:100px;
    height:50px;
    background-color:blue;
    }
    .box3{
    float:left;
    width:100px;
    height:50px;
    background-color:green;
    }
    .clear{
    width:100px;
    height:50px;
    }
</style>
</head>
<body>
    <div class="boxBg">
        <div class="box1">
        框框1
        </div>
        <div class="box2">
        框框2
        </div>
        <div class="box3">
        框框3
        </div>
        <div class="clear"></div>
    </div>
</body>
</html>

执行结果：

以上结果实现告终果，很明显是直接添加了一个高度相等的空元素，由于此元素没有浮动，因此是跟背景同样，所以背景被撑开了。实际上是用清除浮动的原理跟这个是同样的，也是想办法撑开背景；以上去掉clear的宽，高，加上clear属性

.clear{
    clear:left;
    }

执行结果：

这个可能还看不清楚，给clear框里边加几个字试试看

执行结果：

由于clear用了clear:left综上所述，clear左边不能有浮动元素，因此它必须另起一行显示。如此便看到图上的结果，其实仍是用一个元素撑开的背景。固然还有其余方法实现，这里主要是讲清楚浮动就行了:)

float和position:absolute的区别

文章前半部分都在讲述float，相对于float而言，position:absolute是彻底脱离文档流的，它不会占据普通流的空i间，普通流的布局彻底不受绝对定位的影响。先看个例子：

<style>
        .boxBg{
        margin: 0 auto;
        width:500px;
        height:200px;
        border:2px solid #ccc;
        
        }
        .box1{
        width:100px;
        height:50px;
        background-color:red;
        position:absolute;
        left:150px;
        top:10px;
        }
        .box2{
        width:100px;
        height:50px;
        background-color:blue;
        float:left;
        }
        .box3{
        width:100px;
        height:50px;
        background-color:green;
        position:absolute;
        }
 </style>

执行结果：

由于box使用absolute，因其父元素未设置Position因此它的位置是相对于浏览器。box2因其是float因此被box3覆盖。box3由于未设置left.top值，因此未激活absolute位置上不会发生变化。看下边的例子。使用z-index属性，设置box3,

.box3{
        width:100px;
        height:50px;
        background-color:green;
        position:absolute;
        z-index:-1
        }

执行结果：

框2显示出来，框3被覆盖掉了，其实能够这样理解，假设正常流是一个水平面，值为0，浮动元素在这个水平线上，而绝对定位的元素若是z-index小于0就会在水平线一下，因此就被浮动元素遮挡住了，大于0就是在水平线之上，遮盖浮动元素，若是等于0由于绝对定位脱离正常文档流，因此会相对于水平线高出。仍然会遮盖浮动元素。

此文结束。新手学习，不足请指教。