菜鸟理解css的float浮动属性 - 蜗爱CSS

日期: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中文字等的大小，对他设置不起任何作用。