布局模型(5)混合布局中的浮动模型与流动模型

作者：yahu　来源：本站原创　发布时间：2008年10月09日

　　在这一章中，我们重点来探讨一下将浮动模型与流动模型进行混合布局，以探究在混合布局中这二个模型之间的关系，应用前面所讲的浮动模型与流动模型的原理来分析出现的相关问题及处理方法。在理解了浮动模型与流动模型的布局原理后，在结合实际问题来进行分析和解决，相信在思路与认识上都会有个质的飞跃。

一、上浮动模型、下流动模型

　　若在布局结构中，若一个容器中既有浮动模型又有流动模型，则要注意浮动模型与流动模型的对象处于二个不同层面中的问题。
　　我们在一个区块里面添加几个区块，其中在上面设置一个浮动模型（<div class="floatl">、<div class="floatr">），紧接着下面跟着一个或多个依据流动模型布局的块级元素（<H4>、<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> .block { border:2px black solid; background:#eee; } h4 { margin:0px; border:8px blue solid; background:#fff; } p { margin:0px; font: normal normal normal 12px/150% Arial, "宋体" ,Helvetica,sans-serif; border:8px #ccc solid; background:#fff; } .floatl, .floatl img { float:left; } .floatr, .floatr img { float:right; } .floatl, .floatr { width:270px; padding:5px; border:3px red solid; } .floatl img, .floatr img { margin:5px; } </STYLE> <div class="block"> <div class="floatl"> <img height="109" alt="" width="260" src="/UploadFiles/Article/2008/10/200810092238138182.jpg" /> <img height="109" alt="" width="260" src="/UploadFiles/Article/2008/10/200810092238138182.jpg" /> </div> <H4>标题h4是个块级元素</H4> <div class="floatr"> <img height="139" alt="" width="102" src="/UploadFiles/Article/2008/10/200810051638519074.jpg" /> <img height="139" alt="" width="102" src="/UploadFiles/Article/2008/10/200810051638519074.jpg" /> <img height="139" alt="" width="102" src="/UploadFiles/Article/2008/10/200810051638519074.jpg" /> <img height="139" alt="" width="102" src="/UploadFiles/Article/2008/10/200810051638519074.jpg" /> <img height="139" alt="" width="102" src="/UploadFiles/Article/2008/10/200810051638519074.jpg" /> <img height="139" alt="" width="102" src="/UploadFiles/Article/2008/10/200810051638519074.jpg" /> </div> <p> 这是一个依据流动模型按文档流自动进行流动布局的行级元素p，p也是个块级元素，它依据文档流的标准自动进行流动。<br /><br /> 　　在川流不息的人海里，一个匆忙走着的青年，忽然听到“火警！”的叫喊声，当他转过头来看时，报童已经不见了，只是在人丛中传来渐远渐弱的喊声：“快看本市新闻，公教人员困年关，全家服毒，留下万言绝命书……”<br /> 　　这个匆忙走着的青年，便是余新江。今天，他没有穿工人服，茁壮的身上，换了一套干干净净的蓝布中山装。的眉下，深嵌着一对直视一切的眼睛；他不过二十几岁，可是神情分外庄重，比同样年纪的小伙子，显得精干而沉着。听了报童的喊声，他的眉头微微聚缩了一下，更加放快脚步。两条硕长的胳臂，急促地前后摆动着，衣袖擦着衣襟，有节奏地索索发响。不知是走热了，还是为了方便，他把稍长一点的袖口，挽在胳臂上，露出了一长截黝黑的手腕和长满茧巴的大手。<br /> 　　穿过这乱哄哄的街头，他一再让过喷着黑烟尾巴的公共汽车。这种破旧的柴油车，轧轧地颠簸着，发出刺耳的噪音，加上兜售美国剩余物资的小贩和地摊上的叫卖声，仓仓皇皇的人力车案的喊叫声和满街行人的喧嚣声，使节日的街头，变成了上下翻滚的一锅粥。<br /> 　　余新江心里有事，急促地走着。可是，满街光怪陆离的景色，不断地闯进他的眼帘。街道两旁的高楼大厦，商场、银行、餐馆、舞厅、职业介绍所和生意畸形地兴隆的拍卖行，全都张灯结彩，高悬着“庆祝元旦”“恭贺新禧”之类的大字装饰。不知是哪一家别出心裁的商行带头，今年又出现了往年未曾有过的新花样：一条条用崭新的万元大钞结连成的长长彩带，居然代替了红绿彩绸，从雾气弥漫的一座座高楼顶上垂悬下来。有些地方甚至用才出笼的十万元大钞，来代替万元钞票，仿佛有意欢迎即将问世的百万元钞票的出台。也许商人算过帐，钞票比红绿彩绸更便宜些？可惜十万元钞票的纸张和印刷，并不比万元的更大、更好，反而因为它的色彩模糊，倒不如万元的那样引人注目。微风过处，这些用“法币”作成的彩带满空飞舞，哗哗作响。这种奇特景象似乎并不犯讳，所以不象燃放爆竹和焰火那样，被官方明令禁止。 </p> </div> </body> </html>
提示：您可以先修改部分代码再运行

　　在上述<div class="block">容器中，我们放置了二组浮动模型与流动模型的布局：
　　浮动于左侧的<div class="floatl">在<h4>标题块级元素的前面；
　　浮动于右侧的<div class="floatr">在<p>行级元素的前面。

　　我们可以看到，在结构上浮动模型若在流动模型的前面，浮动模型与流动模型的对象则处于二个不同层面中，因此红色边框的浮动模型（<div class="floatl">、<div class="floatr">）飘浮在块级元素<h4>的蓝色边框容器和<p>的灰色区块容器的上层，从而形成了二个不同的层。浮动模型虽然与流动模型不在一个层面上，但是浮动模型的顶部会始终停留在其书写结构的起点位置：

1、浮动于左侧的<div class="floatl">在<h4>标题块级元素的前面：

　　从下图中可以看到，因<div class="floatl">区块是父容器<div class="block">中第一个结构元素，同时<div class="floatl">区块浮动于左侧成为浮动模型，因此位置从父容器（<div class="block">）的左上角原点出发进行布局。同时因为浮动模型与流动模型处于二个层面，因此流动模型<h4>不理会浮动模型"floatl"的位置，也从父容器（<div class="block">）的左上角原点出发进行布局，因此浮动模型"floatl"和流动模型<h4>左上角的原点位置相同：

2、浮动于右侧的<div class="floatr">在<p>行级元素的前面：

　　从下图中可以看到，<div class="floatr">区块的结构位置在<h4>的下方，当<div class="floatr">浮动于右侧成为浮动模型时，因此位置从上一个区块容器（<h4）下面的右下侧开始布局。同时因为浮动模型与流动模型处于二个层面，因此流动模型<p>不理会浮动模型"floatr"的位置，也从上一个区块容器（<h4）下面的右下侧开始布局，因此浮动模型"floatr"和流动模型<p>右上角的原点位置相同。

3、浮动模型影响流动模型中包含的文档流

　　标题元素<h4>、块级元素<p>都是流动模型，其包含的文字内容按文档流的规则进行流布局的同时，受流动模型的影响，自动挪让出浮动模型的宽度，并依据从左到右、自上而下的文档流规则进行流动布局。当文字内容超出了浮动模型的高度时，则自动填充位置形成环绕效果。

　　不过要注意的是，这里只是一个模型元素对另一个模型元素中直接的文档流的影响，而模型元素本身里面所包含的内容不会相互影响。即<div class="floatl">、<div class="floatr">中的图片的位置（浮动模型元素里面所包含的内容），不会影响<h4>、<p>里面的内容。

4、浮动模型（子元素）与流动模型（父容器）的边界问题

　　浮动模型的顶部虽然会始终停留在其书写结构的起点位置，但与流动模型不在同一个层，因此流动模型的父容器无法完全包含浮动模型的子元素，最直接的影响就是流动模型的父容器不会随着浮动模型的子元素的高度自动撑开（除非父容器也是浮动元素，但这往往不是我们想要的），也就是我们常碰到的浮动的子元素不会撑开父元素的背景、高度的问题。

　　解决这个问题的方法，就是在浮动元素的子元素下方加上 CSS 的清除定义 clear: both;（如在子元素下方加上区块<divclass="clearbox"></div>），或者是指定父容器（overflow:hidden; ）包含子元素。具体请参阅《清除浮动的一般解决方案》一文。

　　关于这个边界的问题，我们在下节“两个包含浮动模型的流动模型”示例中会进一步以实例进行探讨。请继续往下阅读吧。

共2页您在第1页首页上一页 1 2 下一页尾页跳转到页本页共有6850个字符