日期：2013-08-05 浏览次数：21197 次
彻底弄懂CSS盒子模式三(浮动的表演和清除的自述)
1.彻底弄懂CSS盒子模式一(DIV排版快速入门)
2.彻底弄懂CSS盒子模式二(导航栏实例)
3.彻底弄懂CSS盒子模式四(绝对定位和绝对定位)
一、下面请看float的精彩表演，有请。
大家好,我是float,欢迎访问CSS家族,在CSS家族中,在当今CSS排版流行的年代,我可扮演着重要的角色哦。由于我的任务对网页设计人员很有用，就像之前align协助你们定位网页元素一样重要，但是我的功用似乎比align强多了。接下来我将现场给你演示我的绝活，看细心点哦。当然也许我一下子不能把我所有的技巧给大家演示，由于有些技巧本人也许一下子记不起来了，那就请那些对我比较了解的人来帮我补充补充啰，比如版主等等啊。
先讲一下我次要的任务，我次要是协助对像在网页中对齐的，一旦我发出float:left或float:right命令，被我浮动的对像就会向左或向右挪动直到遇到边框( border) 、填充( padding） 、边界( margin ）或者另一个块对象的边缘为止，当然也有一些看起来较特殊的情况，比如被我浮动的元素设置了一个负边界（margin）的时候。我还可以让文字流环绕在被我浮动的对像四周,这也是我的特色。另外要留意的一点是，最好给浮动对象设置一下宽度，不然会出现一些意想不到的麻烦。我次要浮动类型有两种,它们是float:left和float:right,当然我还有一个功用是float:none,不过float:none比较少用，这也是我的默认值，有时也是很有用的，我等一下会讲的。下面我开始表演了,我的舞台可以是IE(Internet Explorer),或者FF(Firefox),但是有些技巧我一定要在标准的舞台中,如FF中才能表出来做的,请留意看我的说明,不然你用IE是看不到效果的。
1.我不动声色（我的属性不设置的时候），即：float:none,或者款式中不写这一项时，网页中的元素将按照它们本身的出现方式陈列，普通是靠边对齐，先出现的排在前边,下面运转框是DIV先出现，P后出现，所以P排在DIV后面，留意看DIV的左边还有很多空间，但是P的文字不会跟在它的左边去。看：
[Ctrl+A 全部选择 提示：你可先修正部分代码，再按运转]
2.我向盒子发出float:left命令，此时盒子浮动到左边，虽然看起来我的位置与上面例子没有什么变化，但此时跟在我后面的文本可以环绕到浮动盒子的左边了，看下面：