转:关于CSS中float属性的理解
2007-10-21 11:42
399 查看
首先,必须知道两件事:
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>
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>
相关文章推荐
- 关于CSS中float属性的理解
- CSS-关于float属性与clear属性
- 关于css的float属性
- css 的块元素(block element)、内联元素(inline element)及理解float属性
- CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法
- 关于css float 属性以及position:absolute 的区别。
- 关于css 的float属性
- CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法
- 关于CSS属性display:inline-block的深入理解
- 关于css中float的理解
- CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法
- 对css float属性的理解
- 关于css的float,overflow及z-index属性
- 关于CSS三列Float布局任务
- 关于css 中的visibility属性
- HTML>精通CSS DIV网页样式与布局>理解CSS定位和DIV布局>float属性的自我理解
- 关于css中的block元素inline元素 以及positison属性的初步认识。
- CSS布局 ——从display,position, float属性谈起
- CSS中float属性详解
- 【读书笔记】DOM2级中关于几种CSS实例的理解