在这里介绍基于float的几种布局.
1.浮动与两侧自适应的布局
如图所示，左边没有限定宽度，右边宽度自适应。使用table-cell实现的布局，可以适用于两栏的布局。
HTML代码
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>与浮动与两侧自适应的布局</title>
</head>
<body>
<div class="container">
<div class="left"><img src='1.jpg'></div>
<div class="right">与浮动与两侧自适应的布局与浮动与两侧自适应的布局与浮动与两侧自适应的布局与浮动与两侧自适应的布局与浮动与两侧自适应的布局与浮动与两侧自适应的布局与浮动与两侧自适应的布局</div>
</div>
</body>
</html> 对应的CSS代码
*{padding:0;margin:0;}
.container{
max-width:960px;
margin:0 auto;
}
.left{
float:left;
margin-right:20px;
}
.right{
height:220px;
display: table-cell; /*像表格单元格一样显示*/
width: 3000px;/*由于是根据内容而决定宽度，当内容不是很多的时候， 宽度没有被撑开，此时一些相对于这个元素定位的元素就会错位，故设置足够长的宽度，使其定位正常*/
*width: auto;/*兼容IE6、7*/
background:green;
}
需要说明一点是：display: table-cell后，是根据内容来决定其实际的宽度。
table-cell在IE6、7中是不支持的，可以使用*width:auto进行兼容性处理,不过现在这两个版本IE的市场占有率很低，适当的时候可以删去。
2.右侧尺寸固定的浮动布局
分别有两种方式，一种不改变DOM树结构显示顺序，一种则会使DOM树结构顺序与显示的界面相异。
改变DOM树先后顺序的方法
HTML代码
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>浮动与右侧尺寸固定的流体布局</title>
</head>
<body>
<div class="container">
<div class="right"></div>
<div class="left">与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局</div>
</div>
</body>
</html> 对应的CSS代码
*{padding:0;margin:0;}
.container{max-width:960px;margin:0 auto;overflow:hidden;}
.left{
margin-right:200px;
background:red;
}
.right{
width:200px;
height:100px;
float: right;
background:green;
}
关键点在于，HTML代码中，把在右边显示的DIV放到左边显示的前面，然后通过float: right浮动到右边，可通过调整left盒子的margin-right来调整两个盒子之间的间距。
这种方式会破坏页面优先渲染顺序，它会先渲染右边的盒子，再渲染左边的盒子，视页面区域内容重要程度而定。
不改变DOM树先后顺序的方法
HTML代码
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>浮动与右侧尺寸固定的流体布局</title>
</head>
<body>
<div class="container">
<div class="left">
<p class="left-content">
与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局
</p>
</div>
<div class="right"></div>
</div>
</body>
</html> 对应的CSS代码
*{padding:0;margin:0;}
.container{max-width:960px;margin:0 auto;overflow:hidden;}
.left{
width:100%;
float:left;
background:red;
}
.right{
width:200px;
height:100px;
float: left;
margin-left:-200px;/*这个数值的大小是跟其宽度值相同的*/
background:green;
}
.left-content{
margin-right:220px; //文字不被覆盖
}关于negative margin（负边距），w3c提到:
Given a large enough negative margin applied to a large enough element, the affected adjacent element can even be overlapped.
给定一个足够大的负边距，可以使受影响的相邻元素发生重合。
3.单侧固定的布局
单侧固定的布局分为固定布局和流体布局。
通用的HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动与右侧尺寸固定的流体布局</title>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right">与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局</div>
</div>
</body>
</html> 固定布局
对应的CSS代码
*{padding:0;margin:0;}
.container{max-width:960px;margin:0 auto;overflow:hidden;}
.left{
width:100px;
height:100px;
float:left;
background:red;
}
.right{
width:100px;
height:100px;
float: right;
background:green;
} 通过float:left; float:right;实现。
流体布局
对应的CSS代码
*{padding:0;margin:0;}
.container{max-width:960px;margin:0 auto;overflow:hidden;}
.left{
width:100px;
height:100px;
float:left;
margin-right:20px;
background:red;
}
.right{
background:green;
}