css 浮动

CSS浮动


一、 定义

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。



二、 浮动与不浮动

[img]http://images.cnblogs.com/cnblogs_com/icescut/WindowsLiveWriter/CSS_78C9/clip_image001_thumb.jpg[/img][img]http://images.cnblogs.com/cnblogs_com/icescut/WindowsLiveWriter/CSS_78C9/clip_image002_thumb.jpg[/img]

浮动与不浮动有很多的区别，但主要的区别是不浮动的框是由上往下独占一行的，而浮动的框是紧靠着排列的。上（右）图中d1、d2、d3都是向左浮动的，所以先把d1放在紧靠着父框摆放，然后把d2紧靠着d1摆放，最后d3紧靠着d2摆放。向右浮动亦与之类似。




语法：
float : none | left |right
参数：
none : 　对象不浮动
left : 　对象浮在左边
right : 　对象浮在右边



三、 调整

[img]http://images.cnblogs.com/cnblogs_com/icescut/WindowsLiveWriter/CSS_78C9/clip_image004_thumb.jpg[/img] [img]http://images.cnblogs.com/cnblogs_com/icescut/WindowsLiveWriter/CSS_78C9/clip_image003_thumb.jpg[/img]
如上（左）图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。

如上（右）图所示，如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。

本小节d1、d2、d3均向左浮动。



四、 环绕与清除

[img]http://images.cnblogs.com/cnblogs_com/icescut/WindowsLiveWriter/CSS_78C9/clip_image005_thumb.jpg[/img]

上图中d1向左浮动，d2、d3都不浮动。一开始的定义中就有说到，浮动的框的是脱离普通流的，即d1就浮在上面的，下面的d2、d3感觉不到d1的存在。所以d2在父框中处于顶端。而且d2中的内容不会覆盖d1中的内容，我们可以利用这一点做出环绕效果。比如d1中放的是一张图片，d2中是图片的解释。这样就十分合理。



[img]http://images.cnblogs.com/cnblogs_com/icescut/WindowsLiveWriter/CSS_78C9/clip_image006_thumb.jpg[/img]

但如果d1与d2是不相关的，就想要d2另起一行。那就要使用另一个CSS属性clear。clear属性用于设置框的左边或右边或两边不挨着浮动框。上图d1向左浮动，d2、d3不浮动，且d2的clear属性为left。




语法：

clear : none | left |right | both
参数：
none : 　允许两边都可以有浮动对象
both : 　不允许有浮动对象
left : 　不允许左边有浮动对象
right : 　不允许右边有浮动对象


[img]http://images.cnblogs.com/cnblogs_com/icescut/WindowsLiveWriter/CSS_78C9/clip_image007_thumb.jpg[/img]
另外，虽然不浮动的框感觉到不到浮动框的存在，但浮动框却知道不浮动框的存在。如上图，d1是不浮动的，d2、d3都是向左浮动的，d2能够另起一行而不覆盖到d1。



五、 注意

(1) 本文只作原理性的解释，IE与FireFox的一些差异在这里就不罗列了。

(2) 文中的框即是div