minhost

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。我们通过设置样式的float特性来设定浮动性,可以设置:

Float常跟属性值left、right、none
Float:none 不使用浮动
Float:left 靠左浮动
Float:right 靠右浮动

根据上一篇说明知道,属于浮动对象就不存在于普通流中,我们可以实例如下代码

代码1-1 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>案例</title>
    <style type="text/css">
        #main {
            width: 300px;
            height: 300px;
            background-color: #e0fade;
        }
        #re1 {
            float: left;
            width: 100px;
            height: 100px;
            left: 100px;
            top: 100px;
            background-color: #ff6a00;
        }
        #re2 {
            width: 200px;
            height: 200px;
            background-color: #b6ff00;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="re1">re1</div>
        <div id="re2">re2</div>
    </div>
</body>
</html>

 

根据以上代码可知,re1处于浮动状态,那么它会从文档流中删除,其他对象认为它不存在,所以显示效果如下:

但是文字"re2"被re1挤出来了,所以我们要注意的地方就在这里,虽然其他对象会认为浮动的对象不存在,但文字除外。

float的特性之-包裹性

元素被设置为float特性后,其会发生什么变化呢?我们看以下代码:

代码1-2

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>案例</title>
    <style type="text/css">
        #main {
            width: 300px;
            height: 300px;
            background-color: #e0fade;
        }
        #re1 {
            float: left;
            left: 100px;
            top: 100px;
            background-color: #ff6a00;
        }
        #re2 {
            float: left;
            background-color: #b6ff00;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="re1">re1</div>
        <div id="re2">re2</div>
    </div>
</body>
</html>

以上代码,设置re1和re2都为float:left,则两个元素都像左浮动,效果如下:

我们发现一个现象,假如不设定浮动,div块会逐行显示,但是设置为浮动后,元素缩小为仅包裹内部元素的大小,并且没有换号。这个是因为我们设置float后,浏览器会自动将我们的一个显示块,进行改变,让其去掉了换行符,除非re2的右边碰到了父容器的编辑,则会由float特性进行换行。

所以我们可知:显示为块换行的元素,设置float后,换行符将失去作用。

float的特性之-丢失性

这个丢失性,是指丢失了空间的占有,使得它的父对象认为子对象不存在,且无法根据子对象的大小,调整自己的尺寸,我们可以做简单示例如下:

代码1-3

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>案例</title>
    <style type="text/css">
        #main {
            width: 300px;
            height: 300px;
            background-color: #e0fade;
        }
        #re1 {
            background-color: #ff6a00;
            width:200px;
        }
        #re2 {
            float: left;
            width:100px;
            height:100px;
            background-color: #b6ff00;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="re1">
            <div id="re2">re2</div>
        </div>

    </div>
</body>
</html>

re2为re1的子元素,re2的尺寸为100*100,设置为float:left,那么re1会显示什么效果呢?看下图:

re1并没有显示出来,为什么没有显示,英文re1并不知道re2的存在,我们设置re1的宽度为200px,并没有设置高度,那么re1就是默认高度为0,这就存在一个问题,父对象会丢失子对象。这个在我们界面定义中,一定要注意的问题。

float的特性之-清除clear

该属性的值:指出了不允许有浮动对象的边情况

clear参数值说明:
none :  允许两边都可以有浮动对象
both :  不允许有浮动对象
left :  不允许左边有浮动对象
right :  不允许右边有浮动对象

清除有什么作用呢,上面1-3的示例可知,re1作为父元素,由于内部的元素被设置为浮动,re1没有显示包容子对象的尺寸,在我们的界面设计中,经常会要求父对象能根据子对象大小确定高宽,这个就要使用到clear清除,我们对1-3的代码做如下调整:

代码1-4:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>案例</title>
    <style type="text/css">
        #main {
            width: 300px;
            height: 300px;
            background-color: #e0fade;
        }
        #re1 {
         
            background-color:#808080
        }
        #re2 {
            float: left;
            width:100px;
            height:100px;
            background-color: #b6ff00;
        }
        #re3 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: #ff6a00;
        }
        #re4 {
            clear:both;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="re1">
            <div id="re2">re2</div>
            <div id="re3">re3</div>
            <div id="re4"></div>
        </div>
 
    </div>
</body>
</html>

我们定义了re4,并且设置其clear为both,这个代表什么意思,意思是其左边和右边不允许有浮动对象。那么它直接 清除左右的浮动,让父窗体找到子窗体的尺寸,所以re1的显示出来了,效果下图:

 

分类:

技术点:

相关文章: