首先,必須知道兩件事:
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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
