CSS布局之浮动（二）
在上一个文章里写了关于左（右）侧定宽右（左）侧自动缩放的两列浮动，这个文章就要说一下三列浮动的问题了。在之前说过，两列浮动是其他多列浮动的基础，明白了两列浮动的原理后，三列或三列以上的多列浮动也变得简单。
左侧中间定宽，右侧自适应：
因边左侧跟中间都是定宽的，只有右侧是自适应宽度的，所以这个三列浮动是和两列浮动中的左侧定宽右侧自适应一样的道理，HTML结构代码如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS浮动</title>
</head><body>
<div id=”a”>我是左边</div>
<div id=”b”>我是中间</div>
<div id=”c”>我是右边</div>
</body>
</html>
只需在两列浮动的CSS样式代码上再做轻微的改动：
#a{float:left; width:200px; background:#aaa;}
#b{float:left; width:200px; background:#f00;}
#c{background:#777; margin-left:400px;}
当然这里要记住一点，那就是必须给b对象一个左浮动。
左侧自适应，中间右侧定宽：
与左侧中间定宽右侧自适应一样的道理，当然前提是要把a、b、c三个对象在HTML的结构代码上更换一下顺序，浏览器的解释顺序应该是c-b-a，因为浮动在未浮动之前：
<body>
<div id=”c”>我是左边</div>
<div id=”b”>我是中间</div>
<div id=”a”>我是右边</div>
</body>
CSS代码如下：
#a{background:#aaa;}
#b{float:right; width:200px; background:#f00;}
#c{float:right; width:200px; background:#777;}
左右两侧定宽，中间自适应：
这个布局应该是用得最多的，因为两边侧边栏的定宽，然后中间内容区自适应，这是很多网站常用的布局方式。很多人会在这里使用四个DIV来完成布局，即：
<body>
<div id=”a”>我是左边</div>
<div id=”box”>
<div id=”b”>我是中间</div>
<div id=”c”>我是右边</div>
</div>
</body>
通过一个嵌套的DIV来帮助完成三列浮动，这样的确是可以完成浮动布局的目的，但是不用这个嵌套仍然可以完成三列浮动的目的，既然可以省略一个嵌套，那为什么不省略一个呢？仅仅只需改变b跟c两者的顺序即可达到目的：
<body>
<div id=”a”>我是左边</div>
<div id=”c”>我是右边</div>
<div id=”b”>我是中间</div>
</body>
CSS代码如下：
#a{float:left; width:200px; background:#aaa;}
#b{margin-left:200px; margin-right:200px; background:#f00;}
#c{float:right; width:200px; background:#777;}
这样，在基于两列浮动的基础之上，三列浮动的布局也完成了。
13 条评论
#a{float:left; width:200px; background:#aaa;}
#b{float:left; width:200px; background:#f00;}
#c{background:#777; margin-left:400px;}
我是左边
我是中间
我是右边
如果按你这样的布局 当浏览器宽度小于b的宽度 那么b会流到a下面
所以我觉得还是把a b嵌套在一个层里 再用左定宽,右自适应的方法
当然，如果浏览器的宽度被拉到那么小的话，那也是没办法的事，至于没有在AB外面加嵌套，是想尽量的减少嵌套，让网页的结构更简洁。
《左右两侧定宽，中间自适应》： 这一部分代码你测试过吗？
试试下，右栏流到下面来了。不是上面那位说的浏览器宽度变小。是在最大化情况下哦。我现在这里是IE6。但好像不是IE版本问题。我用google浏览器也试过了。一样。请你在测试一下。我想知道为什么会出现这种现象。谢谢！！
不可能的呀，我的代码是全部检测过后才发上来的。为了验证你所出现的情况，我又再一次测试了一遍，测试的浏览器包括：IE5.5、IE6、IE7、IE8 Beta2、Firefox 3、Opera 9.6、Safair3.1、Google Chrome，在这些浏览器下全部表现正常，并没有出现右栏流到下面的现象，想问下你测试的实际情况，是在什么样的情况下出现右栏流到下面的。
就是把你的代码复制，测试的。
CSS浮动
#a{float:left; width:200px; background:#aaa;}
#b{margin-left:200px; margin-right:200px; background:#f00;}
#c{float:right; width:200px; background:#777;}
我是左边
我是中间
我是右边
哎呀。这里不能贴代码呀。。。
这里不可能出现盒模型bug？
直接从这里复制过去的时候，DIV里面的id后面的双引号要手动修改一下，因为这里面涉及到字符编辑的问题。
整段代码测试是没问题的，你可以试着手动输入测试下。
你说的早就修改过。
CSS布局之浮动（三）测试中也会出现此种现象，但在那里把宽度改为199px，就解决了。
但在这里怎么修改都一样。哎。。
我在找找原因。
不会吧，这三个布局的文章里的代码都经过多个浏览器的测试，没有出现问题的啊。
哎。真是麻烦你啦。都是我的错。
前文所提到的“浮动在前”是关键啊。
我从（一）看到（三）一直用着前一例的代码。为了这几行代码弄得我烦心一天。稳重标记一下就好啦。像我这样刚入门的就不会变成无头苍蝇。
但真的是学到了。呵呵。 谢谢好文。
呵呵，我还以为是什么情况，会造成浮动不正常呢。写出来就是为了能帮助其他人，谢谢你的夸奖。