上一篇
下一篇
菜鸟理解css的float浮动属性
日期:2009-08-08作者:woniu
前面说过html的所有对象分为两种：一种是块状元素（block element），另外一种是内联元素（inline element），当然也存在可变元素，但只是随上下文的结构确定它是块元素还是内联元素。（块元素和内联元素的区别点这查看）。
css的float属性就是改变块状元素（block element）的默认显示方式，block对象设置了float属性后，就不再独占一行，可以浮动在左侧或者右侧。float的属性可以参照css手册。
下面给个简单的例子说明：
css代码：
Example Source Code
.left{
background-color:black;
border:2px solid #333333;
width:200px;
height:100px;
}
.leftfloat{
background-color:black;
border:2px solid #333333;
width:200px;
height:100px;
float:left;
}
.right{
background-color:black;
border:2px solid #333333;
height:100px;
}
left和right是不作浮动的类，leftfloat向左浮动。
Example Source Code
<div class="left">没有任何浮动</div>
<div class="right">没有任何浮动</div>
<div class="leftfloat">向左浮动</div>
<div class="right">浮动在右边</div>
<span class="left">没有浮动</span>
<span class="right">没有浮动</span>
HTML代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
第一个和第二个容器按照块元素的默认情况，各占据一行，没有任何浮动。
第三个和第四个容器，第三个容器浮动到了左边，第四个浮动到了右边。
第五个和第六个容器，是内联元素，自然的处于同一行。要说明的是：他们的宽和高也没有按照定义的那样，这个也是block和inline标签的区别之一。就是inline的高度和宽度就不能像block那样随便设置了，他的值是固定的就是inline中文字等的大小，对他设置不起任何作用。
css的float属性就是改变块状元素（block element）的默认显示方式，block对象设置了float属性后，就不再独占一行，可以浮动在左侧或者右侧。float的属性可以参照css手册。
下面给个简单的例子说明：
css代码：
Example Source Code .left{
background-color:black;
border:2px solid #333333;
width:200px;
height:100px;
}
.leftfloat{
background-color:black;
border:2px solid #333333;
width:200px;
height:100px;
float:left;
}
.right{
background-color:black;
border:2px solid #333333;
height:100px;
}
left和right是不作浮动的类，leftfloat向左浮动。
Example Source Code <div class="left">没有任何浮动</div>
<div class="right">没有任何浮动</div>
<div class="leftfloat">向左浮动</div>
<div class="right">浮动在右边</div>
<span class="left">没有浮动</span>
<span class="right">没有浮动</span>
HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
第一个和第二个容器按照块元素的默认情况，各占据一行，没有任何浮动。
第三个和第四个容器，第三个容器浮动到了左边，第四个浮动到了右边。
第五个和第六个容器，是内联元素，自然的处于同一行。要说明的是：他们的宽和高也没有按照定义的那样，这个也是block和inline标签的区别之一。就是inline的高度和宽度就不能像block那样随便设置了，他的值是固定的就是inline中文字等的大小，对他设置不起任何作用。
[本日志由 woniu 于 2009-08-08 04:10 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: div+csscssfloat实例新手学css
相关日志:
文章来自: 本站原创引用通告: 查看所有引用 | 我要引用此文章Tags: div+csscssfloat实例新手学css相关日志:
评论: 0 | 引用: 0 | 查看次数: -
发表评论