负载箱 风力发电电阻:菜鸟理解css的float浮动属性 - 蜗爱CSS

来源：百度文库 编辑：九乡新闻网 时间：2024/07/14 14:12:38
菜鸟理解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
没有任何浮动

没有任何浮动

向左浮动

浮动在右边

没有浮动
没有浮动


HTML代码

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
第一个和第二个容器按照块元素的默认情况，各占据一行，没有任何浮动。
第三个和第四个容器，第三个容器浮动到了左边，第四个浮动到了右边。
第五个和第六个容器，是内联元素，自然的处于同一行。要说明的是：他们的宽和高也没有按照定义的那样，这个也是block和inline标签的区别之一。就是inline的高度和宽度就不能像block那样随便设置了，他的值是固定的就是inline中文字等的大小，对他设置不起任何作用。


菜鸟理解css的float浮动属性 - 蜗爱CSS CSS浮动属性Float详解 CSS属性. 更简洁的 CSS 清理浮动方式 几种css 清除浮动的方法 CSS清除浮动专题 CSS清除浮动优一法 CSS div float IE和FireFox的兼容性问题 CSS属性behavior的语法及介绍 CSS中的text-shadow属性的用法 CSS常用文本属性 CSS背景属性 CSS边框属性 CSS top 属性 消除css浮动--clearfix:after CSS css CSS list-style-type 属性 Css Filter Alpha 属性详解 JavaScript下的css属性可是大小写敏感的 CSS的filter常用滤波器属性及语句大全 深入了解css的行高Line Height属性 万能清除浮动样式 | CSS | 前端观察 line-height详解 - 蜗爱CSS