6、上浮下流
网页中上一个包含元素（父元素）为浮动元素，下一个包含元素（父元素）为流动元素，则不会出现大的布局错乱的问题。
注意：要使流动模型的父元素包含浮动模型布局子元素，则需要就是在浮动子元素下方加上 CSS 的清除定义 clear: both;（如在子元素下方加上区块<divclass="clearbox"></div>），或者是指定父容器（overflow:hidden; ）包含子元素，具体请参阅《清除浮动的一般解决方案》一文。
注意：若其中有“上流下浮”的布局时，要解决流动元素包含浮动元素高度的问题。具体请参阅《布局模型(5)混合布局中的浮动模型与流动模型》一文。
修改的CSS代码：
#con1, #con2, #con3, #con4 {
overflow:hidden; /* 指定父容器包含子元素 */
}
#con1, #con3 {
float:left; /* 定义#con1和#con3容器由块级元素转变为内联元素 */
width:45%; /* 定义内联元素的宽度 */
}
提示：您可以先修改部分代码再运行
以上我们总结了六种基本混合布局模式，在实际应用中会遇到各种混合方式，相互嵌套的关系层次也是千变万化和复杂多变，但是真正理解模型布局的基本规律之后，就能清晰明了问题的根本原因，从而快速解决所出现的怪异现象。
Copyright © 2003- PowerEasy Yahu All Rights Reserved.
