网页页面合理布局方法
网页页面合理布局方法，关键包括：文本文档流、波动层、float特性。
文本文档流
HTML网页页面的规范文本文档流(默认设置合理布局)是：从上到下，从左到右，遇块(块级元素)换行。
波动层
波动层：给元素的float特性取值后，便是摆脱文本文档流，开展上下波动，紧贴着父元素(默认设置为body文字地区)的上下边框。而此波动元素在文本文档流空出的部位，由后续的(非波动)元素填充上去：块级元素立即填充上去，若跟波动元素的范畴产生重合，波动元素遮盖块级元素。内联元素：有时间隙就插进。
float 特性详细介绍
① left ：元素向左波动。
② right ：元素向右波动。
③ none ：默认设置值。
④ inherit ：从父元素承继float特性。
示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>2.3-float特性</title>
<style type="text/css">
#a
{
background-color:Red;
height:50px;
width:100px;
}
#b
{
background-color:Yellow;
height:50px;
width:200px;
}
#c
{
background-color:Blue;
height:50px;
width:300px;
}
#d
{
background-color:Gray;
height:50px;
width:400px;
}
</style>
</head>
<body>
<div id=a >div-a</div>
<div id=b>div-b</div>
<div id=c>div-c</div>
<input type="text" value="input1" />
<input type="text" value="input2" />
<input type="text" value="input3 " />
<div id=d>div-d</div>
<input type="text" value="input4 " />
</body>
</html>
2. float:left
表明：元素向左波动。
编码变动
变动后主视图
① 访问器的宽度“不足长”时
② 访问器的宽度"够长"时
结果
3. float:right
表明：元素向右波动。
编码变动
变动后主视图
① 访问器的宽度“不足长”时
② 访问器的宽度"够长"时
结果
4. 邻近元素含有float特性
因内联元素的特点，最好是别把内联元素与块级元素邻近应用float特性。
下面都以块级元素为例：
默认设置主视图：
4.1 float:left
给这3个div都加上 float:left
主视图
①访问器的宽度"充足长"
②访问器的宽度"不足长"
结果
Ⅰ 邻近的波动元素，left特性最前面的元素，排在最左边。
Ⅱ 变成波动元素后，在波动层有着内联元素的"特点"，当好几个波动元素1排容不下时，就换行。
4.2 float:right
给这3个div都加上 float:right
主视图
①访问器的宽度"充足长"
②访问器的宽度"不足长"
结果
Ⅰ 邻近的波动元素，right特性最前面的元素，排在最右面。
Ⅱ 变成波动元素后，在波动层有着内联元素的"特点"，当好几个波动元素1排容不下时，就换行。
4.3 height高宽比不等的块级元素
把div-a的height值设为超过div-b，3个div都加上 float:left后：
主视图
①访问器的宽度"充足长"
②访问器宽度变小时
③访问器宽度进1步变小时
结果
Ⅰ height不相同的div波动元素排列时，照有着内联元素的"特点"，当好几个波动元素1排容不下时，就换行。
处理访问器宽度变小形变
把加上float的特性的div元素嵌入在1个div中，并给此div加上width和height特性。访问器宽度变小时，也不容易产生形变。