首先
,
必须知道两件事
:
1.
浏览器事按照
HTML
代码中对象声明的先后顺序
,
以流布局的方式来显示对象的
.
2.
HTML
中的所有对象几乎都默认分为两种
: block
对象和
in-line
对象
.
其中
, block
默认的显示状态是占据整行
; in-line
对象则相反
,
允许其他对象与它在一行中显示
.
现在来看
float
属性
,
它的作用就是改变
block
对象的默认显示方式
. block
对象设置了
float
属性之后
,
它将不再独自占据一行
.
具体可以参悟下面这个实例
:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style>
.left
{
background-color:#cccccc;
border:2px solid #333333;
width:200px;
height:100px;
}
.leftfloat
{
background-color:#cccccc;
border:2px solid #333333;
width:200px;
height:100px;
float:left;
}
.right
{
background-color:#cccccc;
border:2px solid #333333;
height:100px;
}
</style>
</HEAD>
<BODY>
<div class="left">div left float:none</div>
<div class="right">div right</div>
<div class="leftfloat">div left float:left</div>
<div class="right">div right</div>
<span class="left">span left float:none</span>
<span class="right">span right</span>
</BODY>
</HTML>
扫一扫
1460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
