CSS实验1：盒子的浮动

1、CSS实验1：盒子的浮动作者：黑胡子 实验时间：2012-09-05 E-mail：40196267摘要：从css角度看，为实现浮动，选择div还是span无关紧要，因为二者可以通过一个简单的display属性来转换。在Firefox与IE6两大系列浏览器中，盒子的浮动差异很大。综合起来，影响因素有：元素类型（display）、元素尺寸（width和height）、元素边距（margin）。这个问题困扰了好久好久，导致一直放弃对css的全面学习和使用。查阅了很多资料，看了很多书，也都没多大收获，只好自己通过实验摸索了。实验目的是试图弄清楚各浏览器实现浮动的内在机制，能灵活应用，并且兼容各种浏览

2、器。先给出基本html代码和css代码：基本代码：盒子的浮动body margin:0;padding:0;#Boxheight:400px;width:600px;#Box1,#Box2,#Box3 width:100px;height:100px;margin:20px;/盒子的边框设为20px，目的是为了便于作为各种尺寸的参照，而边框的颜色便于区分盒子。#Box1 border:solid 20px red;#Box2 border:solid 20px blue;#Box3 border:solid 20px green;Box1Box2Box3实验一：inline类型元素（俗称行内元

3、素）的标准流实验方法：直接运行上面基本代码实验结果：效果图1-1和图1-2图1-1：inline类型元素的标准流效果（Firefox）图1-2：inline类型元素的标准流效果（IE6）实验结论：1、css的高度和宽度设置“width:100px; height:100px;”对inline类型元素不起作用。2、正常情况下，两种浏览器在显示inline类型元素时没区别。实验二：block类型元素（俗称块级元素）的标准流实验方法：在#Box1,#Box2,#Box3 中添加“display:block;”即#Box1,#Box2,#Box3 width:100px;height:100px;ma

4、rgin:20px;display:block;实验结果：如图1-3和图1-4图1-3：block类型元素的标准流效果（Firefox）图1-4：block类型元素的标准流效果（IE6）实验结论：1、inline类型元素与block类型元素可以通过display来实现相互转换。2、两种类型的元素在没有css浮动和定位设置的情况下，在显示上两种浏览器效果没差别。3、将span元素加上“display:block;”等价于将span标签改为div标签。同样，将div元素加上“display:inline”等价于将div标签改为span标签。实验三：inline类型元素的浮动实验方法：#Box1,#

5、Box2,#Box3 width:100px;height:100px;margin:20px;display:inline;/span元素本身就是inline类型，这个设置可略，但div元素不能省。float:left;/实现左浮动实验结果：如图1-5和1-6。图1-5：inline类型元素的浮动效果（Firefox）图1-6：inline类型元素的浮动效果（IE6）实验结论：1、浮动模式下，css的高度和宽度设置“width:100px; height:100px;”对inline类型元素发生作用。2、浮动模式下，inline类型元素在两种浏览器的显示效果没区别。实验四：block类型元素

6、的浮动实验方法：#Box1,#Box2,#Box3 width:100px;height:100px;margin:20px;display:block;float:left;实验结果：如图1-7和图1-8图1-7：block类型元素的浮动效果（Firefox）图1-8：block类型元素的浮动效果（IE6）实验结论：1、在IE6中，block类型元素处于左右两边时，边距加倍。即最左边的元素左边距加倍，最右边的元素右边距加倍。2、在Firefox中，inline类型元素和block类型元素的浮动效果一致（比较图1-7和图1-5）。3、在浮动状态下，无论是inline类型元素还是block类型元

7、素，也无论是IE6还是Firefox，相邻浮动元素的四个边距（上下左右）都不会发生重叠。但block类型元素会发生结论1的加倍现象。比较图1-7和图1-8，直观上可以Box1的左边距相差两倍，图1-7中Box1的左边距为20px，而在图-8中Box1的右边距为40px。为了证明以上结论，可以进行一下变动：（1）将父元素Box的width设置到580px以内，用IE测试，结果是Box3里面的最后一个字母会掉到第二行（如图1-9）。只是“3”掉下来，真是怪现象。图1-9：当Box的width小于580px时（IE6）（2）把元素Box的width设置到560px以内，用IE测试，结果是整个Box3

8、掉下来了，并且左边距与Box1一样为40px（如图1-10）。图1-10：当Box的width小于560px时（IE6）（3）把元素Box的width设置为540px，用Firefox测试，结果是依然保持图1-7的效果（如图1-11）。图1-11：当Box的width大于等于540px时（Firefox）（4）把元素Box的width设置到540px以内，用Firefox测试，结果是Box3掉下来了，但左边距与Box1一样，都是是20px（如图1-12）。备注：540=1003(204)3图1-12：当Box的width小于540px时（Firefox）实验五：浮动元素再加“clear:bot

9、h;”实验方法：#Box1,#Box2,#Box3 width:100px;height:100px;margin:20px;display:inline;/或者display:block;float:left;/或者float:right;clear:both;/此处是此实验的重点实验结果：如图1-13至图1-16 图1-13：左浮动的效果（Firefox） 图1-14：右浮动的效果（Firefox） 图1-15：左浮动的效果（IE6） 图1-16：右浮动的效果（IE6）实验结论：1、在浮动模式下再加“clear:both”，会迫使元素换行显示，相当于没有浮动的block元素。2、在浮动模式

10、下再加“clear:both”，同时又具有浮动特征（可以左右浮动）。“float:left”和“float.right”的作用相当于使元素置于左侧或者右侧。3、无论inline类型元素还是block类型元素均适合以上结论。实验六：有宽度或高度限制的block元素的部分浮动实验方法：#Box1,#Box2,#Box3 width:100px;height:100px;margin:20px;display:block;/Box1左浮动#Box1 float:left;border:solid 20px red;/Box2右浮动#Box2 float:right;border:solid 20px

11、 blue;/Box3不浮动#Box3 border:solid 20px green;实验结果：如图1-17和图1-18图1-17：有宽度或高度限制的部分浮动的效果（Firefox）图1-18：有宽度或高度限制的部分浮动的效果（IE6）实验结论：1、浮动的元素（Box1和Box2）除了具有实验四结论1的差异外，没有差别。2、但不浮动的元素（Box3）差别巨大。在Firefox中正常浮动。本来文字“Box3”应该在盒子Box1的右边，但由于盒子Box1与盒子Box3一样大，所以文字“Box3”被挤效率换行显示了，这说明浮动正常。但在IE6中，左浮动的元素（Box1）把不浮动的元素（Box3）挤

12、到右边，右浮动的元素（Box2）把不浮动元素（Box3）挤到左边，左右都不不会浮在Box3的上面。3、即使元素Box3只设宽度或者只设高度，都会发生以上类似现象。实验七：无宽度和高度限制的block元素的部分浮动实验方法：body margin:0;padding:0;#Boxheight:360px;width:600px;border:solid 20px black;/父元素Box要加边框#Box1,#Box2,#Box3 display:block;/Box1左浮动#Box1 width:100px;height:100px;margin:20px; /让边距有差异好比较border:

13、solid 20px red;float:left;/Box2左浮动#Box2 width:100px;height:100px;margin:40px; /让边距有差异好比较border:solid 20px blue;float:left;/Box3不浮动#Box3 margin:60px; /让边距有差异好比较border:solid 20px green;实验结果：如图1-19和1-20图1-19：无宽度和高度显示的部分浮动的效果（Firefox）图1-20：无宽度和高度显示的部分浮动的效果（IE6）实验结论：1、在父元素Box设置了边框粗细之后，二者基本都正常显示，IE6的浮动元素依

14、然出现实验四的现象。2、两种浏览器的所有元素（浮动元素或不浮动元素）在横向与纵向上都以父元素内容区的起点（或者说父元素的边框内侧）为参考点进行偏移。3、相邻的浮动元素遵照实验四的规则进行偏移。4、若去掉父元素Box边框粗细的设置，Firefox则发生变化：横向上的参考点不变，但在纵向上则以Box3的边框外侧为参考点了（如图1-21），IE不会出现这种现象（如图1-22）。证明方法：（1）在父元素Box有边框时，随便调整Box3的边距，不影响Box1和Box2的位置偏移（两种浏览器都是）。（2）在父元素Box无边框时，随便调整Box3的边距，在IE6下，Box1和Box2的位置偏移不变，但Fir

15、efox中，Box1和Box2会上下移动，左右不移动。真搞不清楚什么原因。按理说，Box1和Box2浮动后，Box1和Box2原本的空间被Box3所占据，应当以Box3为参照进行浮动才对，但两种浏览器却都不是。图1-21：去掉父元素Box边框粗细的效果（Firefox）图1-22：去掉父元素Box边框粗细的效果（IE6）实验八：inline元素的部分浮动实验方法：body margin:0;padding:0;#Boxheight:360px;width:600px;border:solid 20px black;/父元素Box要加边框#Box1,#Box2,#Box3 width:100px

16、;height:100px;margin:20px; display:inline;/这是本实验与实验七的主要区别/Box1左浮动#Box1 float:left;border:solid 20px red;/Box2左浮动#Box2 float:left;/将此处改为float:right;时Box3被夹在中间border:solid 20px blue;/Box3不浮动#Box3 border:solid 20px green;实验结果：如图1-23和图1-24图1-23：inline类型元素部分浮动效果（Firefox）图1-23：inline类型元素部分浮动效果（IE6）实验结论：1、

17、当inline类型元素浮动时，若紧接着的非浮动元素（Box3）是也是inline型元素，则两种浏览器显示都一样。2、紧接着的非浮动元素（Box3）如果是inline类型元素，则浮动元素不会浮在inline类型元素上面。3、Box3此时是inline类型元素且不浮动，所以width和height对它失去影响，导致它与Box1和Box2不一样大。4、若把Box3改为block类型元素，则实验结果与实验六完全相同。实验九：最理想的浮动实验方法：body margin:0;padding:0;#Boxheight:360px; /可有可无width:600px; /可有可无/border:solid 20px black;/Box的边框可有可无#Box1,#Box2 float:left;/浮动方向随意display:inline;/Box1和Box2必须是inline类型，否则有差异margin:20px; /可有可无#Box1 width:100px; /可有可无height:100px; /可有可无float:left;border:solid 20px red; /可有可无#Box2 width:100px; /可有可无height:100px; /可有可无border:solid 20px blue; /可有可无#Box3 display:block;