彻底弄懂CSS盒子模式之三 - 网页制作

　彻底弄懂CSS盒子模式之三

作者：webflash　时间： 2007-04-02　文档类型：原创　来自：蓝色理想

第 1 页浮动的表演和清除的自述 [1]
第 2 页浮动的表演和清除的自述 [2]

彻底弄懂CSS盒子模式三(浮动的表演和清除的自述)

1.彻底弄懂CSS盒子模式一(DIV布局快速入门) 【论坛讨论】
2.彻底弄懂CSS盒子模式二(导航栏实例) 【论坛讨论】
4.彻底弄懂CSS盒子模式四(绝对定位和相对定位) 【论坛讨论】
5.彻底弄懂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的文字不会跟在它的右边去。看：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>不设浮动属性的情况</title> <style type="text/css">  </style> </head> <body> <div id="box">我现在没有浮动</div> <p>什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

2.我向盒子发出float:left命令，此时盒子浮动到左边，虽然看起来我的位置与上面例子没有什么变化，但此时跟在我后面的文本可以环绕到浮动盒子的右边了，看下面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>对象左浮动</title> <style type="text/css">  </style> </head> <body> <div id="box">我现在左浮动（float:left）</div> <p>什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

3.我向盒子发出float:right命令，不难想象此时盒子浮动到右边，此时文本将会环绕到此盒子的左边，看下面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>对像右浮动</title> <style type="text/css">  </style> </head> <body> <div id="box">我现在右浮动（float:right）</div> <p>什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

哈哈，看我表演了几项是不是开始觉得有点烦了，那么简单无聊的，那下面就给你表演几项特别的，但愿你不是IE的崇拜者，因为下面效果你用IE是看不到效果的，请用像FF那样的标准浏览器来运行代码框或测试吧。

4．浮动对象有负边界的情况，这时浮动对象可能会漂浮到其所在父对象外边去，这有点像绝对定位的效果，但又与绝对定位不同，它还能影响它所在地方的文本流，请用标准浏览器FF看下面代码效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>浮动对象有负边界的情况[请用标准浏览器查看]</title> <style type="text/css">  </style> </head> <body> <div id="box"> <div id="box2">margin-top:-15px</div> 右上方小盒子边界是margin:-10px 10px 0px 0px;，folat:right，这个效果还可以吧，这可不是用相对、或者绝对定位做出来的哦，部分文字还是有环绕效果。如果在上面小盒子输标题，在这大盒子内部输内容，这种类型的网页版面效果还可以的，大家可以举一反三，多做出另外类似的效果来。</div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

5．如果一个较宽的子盒子在一个较窄的父盒子中拥有浮属性，子盒子漂浮后不会影响到父盒子的宽度，子盒子超出父盒子的部分会越到父盒子外面，但越出父盒子外的部分不会引起外边文本流的移动，而会直接覆盖在外边文字上面的，请用标准浏览器FF看下面代码效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>子级元素宽大于父级元素宽的情况[请用标准浏览器查看]</title> <style type="text/css">  </style> </head> <body> <div id="box">我现在左浮动（float:left），我的宽小于子盒子，但它不会把我撑开，同时我设置了一定的左边界，目的是方便看到子盒子越出去的情况 <div id="box2">我是子盒子，我的宽比父级要大，同时我的浮动是folat:right,所以右边靠在父级盒子的右边，而宽于父盒子的部分在大盒子左边越出。</div> </div> <p>什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

6．如果父盒子不设定高度或者高度为自动，而其子盒子设定了浮动，并且高度超过了父盒子，在标准浏览器中，父盒子高度是不能自适高度，但是这种高度自适应常是我们需要的，如何做到让高度自适应呢，常见的办法是在父级内，浮动子盒子后边加入以下代码：<div style="clear:both"></div>清除掉那个小盒子的浮动。请自行把代码中我注释部分消除注释再看效果，现在是没有自适应的情况，请用标准浏览器FF预览和测试代码效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>高度不能自适应[请用标准浏览器查看]</title> <style type="text/css">  </style> </head> <body> <div class="box">我是父盒子,我的高没有设定,但是我的子盒子高过我时,在标准浏览器中我的高不能自适应。 <div class="box2"> 这个盒子是小盒子，它没有设定高度属性，其高度是随里面的文字的加多而自动升高的，但是当它的高度超过父级盒子时，在标准浏览器中并没有把父级撑高，这种情况与上面讲的子级宽度超过父级元素是一样的，但是这种高度自适度常是我们需要的，如何做到让高度自适应呢，常见的办法是在父级内加入以下样式：<div style="clear:both"></div>清除掉与其同级小盒子的浮动。 </div>  </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

经典论坛讨论：
http://bbs.blueidea.com/thread-2732609-1-1.html

出处：蓝色理想
责任编辑：elesa

上一页下一页浮动的表演和清除的自述 [2]

◎进入论坛网页制作、网站综合版块参加讨论

相关文章

彻底弄懂CSS盒子模式之二

作者文章

彻底弄懂CSS盒子模式之五

彻底弄懂CSS盒子模式之四

彻底弄懂CSS盒子模式之二

彻底弄懂CSS盒子模式之一

站点最新

站点最新列表

十步学会用css建站(全)

栅格:灵活应变

栅格:一以贯之

美化段落文本 Ⅱ

元素层叠级别及z-index剖析

标记语言——应用CSS

小季教你画漫画第一课

对设计/设计师/设计行业的感受

曹鹏 SEO 视频教程

曹鹏 CSS 视频教程

栏目最新

栏目最新列表

火星人的耳机

公司正式宣布创业失败

用corelDEAW 12打造唇膏

二行代码解决全部网页木马

一行代码解决iframe挂马

Photoshop制作星空爆炸效果

CorelDraw 12打造休闲裤

Firework如何画特殊的切角图形

Firework打造韩式风格的手提袋

flash实例:打造佛光效果