转：关于CSS中float属性的理解

来源：互联网发布：网络语皮卡丘什么意思编辑：程序博客网时间：2024/06/03 13:35

首先,必须知道两件事:

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>