浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。我们通过设置样式的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的显示出来了,效果下图: