详细分析css float 属性以及position:absolute 的区别(3)

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

执行结果:

详细分析css float 属性以及position:absolute 的区别

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

这种情况产生的原因,都知道是因为浮动造成的,是的,是浮动,很多地方有说浮动元素会脱离普通流,所以普通元素可以当浮动元素不存在,所以这里就不会撑开背景了,但是认真看的同学,一定会记得上边有提到浮动元素不会影响块框,但是会影响行框,也就是文字或内联元素,不管是块级元素还是内联元素都属于普通流,如果浮动元素脱离普通流又为何会影响行框?其实我觉得不必要纠结于这些概念性的东西。按照我的理解浮动元素就是跟块级元素不在一个水平空间,跟文字内联元素在一个空间,所以这里边框就相当于在背景之上,所以不会影响背景元素,平常所说的清除浮动,并不是说把浮动元素的float属性去掉,而是清除其周围的浮动元素,使其自身周围没有浮动元素,所以如果想让框三到第二行,不能在框2里边用clear:right;而是需要在框3里边使用clear:left;

复制代码 代码如下:


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

执行结果:

详细分析css float 属性以及position:absolute 的区别

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>
        <div>
        框框1
        </div>
        <div>
        框框2
        </div>
        <div>
        框框3
        </div>
        <div></div>
    </div>
</body>
</html>

执行结果:

详细分析css float 属性以及position:absolute 的区别

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzzpwx.html