顾名思义，在基于浮动的布局中，只需设置希望定位的元素的宽度，然后将它们向左或向右浮动。因为浮动的元素不再占据文档流中的任何空间，它们就不再对包围它们的块框产生任何影响。为了解决这个问题，需要对布局中各个点上的浮动元素进行清理。非常常见的做法是，不对元素进行连续地浮动和清理，而是浮动几乎所有东西，然后在整个文档的“战略点”(比如页脚)上进行一次或两次清理。
1． 两列的浮动布局
在下面的示例中，(X)HTML由品牌区域、内容区域、主导航区域和最后的页脚组成。整个设计包围在一个容器 div 中，这个 div 使用前面介绍的方法之一进行水平居中:
<div id="wrapper">
<div id="branding">
...
</div>
<div id="content">
...
</div>
<div id="mainNav">
...
</div>
<div id="footer">
...
</div>
</div>
实现这个布局的 CSS 非常简单。只需为每个列设置想要的宽度，然后将导航向左浮动，将内容向右浮动:
#content {
width: 520px;
float: right;
}
#mainNav {
width: 180px;
float: left;
}
#footer {
clear: both;
}
为了确保页脚正确地定位在这两个浮动元素的下面，需要清理页脚。
2. 三列的浮动布局
创建三列布局所需的 HTML 与两列布局的 HTMLL 非常相似，唯一的差异是在内容 div 中添加了两个新的div: 一个用于主内容，另一个用于次要内容。
<div id="content">
<div id="mainContent">
mainContent
</div>
<div id="secondaryContent">
secondaryContent
</div>
</div>
只需设置想要的宽度，然后将主内容向左浮动，将次要内容向右浮动:
#mainContent {
width: 320px;
float: left;
}
#secondaryContent {
width: 180px;
float: right;
}