前面说过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中文字等的大小,对他设置不起任何作用。
转载请注明:睿美印象
网站建设工作室www.ruimeiyx.com