二、两个包含浮动模型的流动模型
若在页面中有二个流动模型，并且里面都有一个或多个浮动模型，这时的情况会更加复杂。先看下面的代码：
提示：您可以先修改部分代码再运行
在上面网页中，上下各放了二个块级元素<ul> 和<divclass="block"> ，其中在块级元素<ul> 中放置了由块级元素转化为浮动元素的<li>（即设置块级元素<li>的 CSS 为float:left;）。当然，在块级元素<divclass="block"> 中也有浮动元素，这里不作详细分析。网页的结构代码如下：
我们想要实现的效果为：
顶部有一行红底白字的菜单，当鼠标移动到菜单项时变为黑底红字，形成网页的基部菜单导航效果。而<divclass="block"> 区块位于菜单导航下方。
下图是在 IE 浏览器中浏览的情况，上面的导航居于顶部，下面的<div class="block">区块居于下方，实现了我们想要实现的效果：
上面的图片似乎已经达到了效果，但是要知道，这是 IE 浏览器并没有遵循浮动模型与流动模型的规则的 Hack ，我们可以从非 IE 浏览器中看到正确的解析效果。
下图是在 Mozilla Firefox （或其他非 IE 浏览器）中浏览的情况。从右上角的图示情况可以看出，ul的内容已经居于<div class="block">区块中：
非 IE 浏览器中解析的情况是属于网页模型的布局规则的。这里我们详细分析一下：
1、在块级元素<ul> 中，因设置了块级元素<li>的 CSS 为float:left;，此时块级元素<li>转化为浮动元素。
2、块级元素（<ul>）没有设置其高度，同时清除了其默认的内、外边距（margin:0px; padding:0px;），则此时块级元素（<ul>）高度为0。
3、块级元素（<ul>）中包含了浮动子元素（<li>），在前章“上浮动模型、下流动模型”中我们也讲过，若浮动模型若在流动模型的前面，浮动模型与流动模型的对象则处于二个不同层面中，因此块级元素（<ul>）并没有受浮动子元素（<li>）内容的影响而撑开高度。
同时浮动子元素并没有清除浮动（也没有设置块级父元素包含浮动子元素），因此浮动子元素（<li>）飘浮在父级块元素的上方。也就是说，此时的块级元素（<ul>）的高度并不能随着浮动子元素（<li>）延伸其高度，此时块级元素（<ul>）高度依然为0。
4、在结构上，块级元素（<ul>）后面紧接着是块级元素（<divclass="block"> ），因此块级元素<divclass="block"> ）在流动时是寻找前面块级元素<ul>的底边界。因此在 Mozilla Firefox （或其他非 IE 浏览器）中浏览的情况符合布局模型的基本原理。
为了验证上面分析的正确性，我们给块级元素（<ul>）的 CSS 设置一个边框（border:1px green solid;），看一看<ul>真实的边界究竟在哪。我们修改一下 CSS 定义（您可以在上面的代码框中加入下面的修改代码后再单击“运行代码”按钮以查看修改后的效果）：
ul{
list-style:none;
}
改成：
ul{
list-style:none;
border:1px green solid;
}
在 Mozilla Firefox （或其他非 IE 浏览器）中浏览后，我们看到了块级元素<ul>的 2px 的绿色边框，它居于顶部，而块级元素<divclass="block"> ）紧贴着前面块级元素<ul>的底边界，与我们分析的情况相吻合：
我们在 IE 浏览器下浏览一下效果，同时对比一下 Mozilla Firefox 浏览器中的效果：
从上面的分析可以看出，Firefox 浏览器的解析是符合布局模型的基本原理的。由于 IE 浏览器解析的不规范性，给设计师带来了很多麻烦－－但在明白了浮动模型与流动模型的布局原理后，这个问题就变得简单多了。
当然，虽然 Firefox 浏览器符合布局模型的基本原理，但还没有达到我们想要的效果。这时只要解决块级元素<ul>的高度能随着其包含的浮动子元素<li>的高度进行自由延伸的问题，即可实现我们想要的效果。我们进一步修改一下 CSS 定义，定义父元素<ul>为overflow:hidden; 以包含浮动子元素（具体请参阅《清除浮动的一般解决方案》一文）：
ul{
list-style:none;
border:1px green solid;
}
改成：
ul{
list-style:none;
border:1px green solid;
overflow:hidden;
}
我们在 IE 、 Mozilla Firefox 等浏览器中浏览的效果如下，实现了我们想要的效果：
至此，我们分析了在页面中有二个流动模型，并且两个流动模型中都包含浮动模型时的复杂情况分析，从中我们可以认识到浮动模型与流动模型进行混合布局的复杂性，不过真正理解和掌握布局模型的基本原理后，其解决思路就会清晰许多，因为这时我们不仅能解决问题，而且知道其所以然，这的确是件很让人舒心的事。
Copyright © 2003- PowerEasy Yahu All Rights Reserved.
