首先,必須知道兩件事:
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>