div 浮动框

• 博客园
• 闪存
• 首页
• 新随笔
• 管理
• 订阅

随笔- 61  文章- 0  评论- 16 

CSS浮动

1、 定义

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

 

2、 浮动与不浮动

                             

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

 

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

 

3、 调整

                              

    如上（左）图所示，若是包含框太窄，没法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。

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

    本小节d一、d二、d3均向左浮动。

 

4、 环绕与清除

                                   

    上图中d1向左浮动，d二、d3都不浮动。 一开始的定义中就有说到，浮动的框的是脱离普通流的，即d1就浮在上面的，下面的d二、d3感受不到d1的存在。因此d2在父框中处于顶端。并且d2中的 内容不会覆盖d1中的内容，咱们能够利用这一点作出环绕效果。好比d1中放的是一张图片，d2中是图片的解释。这样就十分合理。

 

                                 

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

 

语法：

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

                                              

    另外，虽然不浮动的框感受到不到浮动框的存在，但浮动框却知道不浮动框的存在。如上图，d1是不浮动的，d二、d3都是向左浮动的，d2可以另起一行而不覆盖到d1。

 

5、 注意

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

(2) 文中的框便是div。