CSS布局之浮动（一）
CSS浮动一直是个比较让人郁闷的问题，很多的布局问题都出在浮动上，特别是当浮动的列数很多时，但其实只要理解了两列结构的浮动，面对多列数的浮动也不会再心慌，因为两列结构的左右浮动是最基本的浮动，也是更多浮动的基础，三列、四列等的浮动都是出于此的。
来看一下几种常见的CSS两列浮动，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>
</body>
</html>
左侧定宽右侧自适应：
#a{float:left; width:200px; background:#aaa;}
#b{background:#f00;}
当需要左侧定宽而右侧自动时，则只需要设定a对象为左浮动即可，b对象默认是占整个屏幕的宽度的，但因为a为左浮动并且占了200PX的宽度，b则自动位于a后面。
当然这样会有一个问题，那就是当左侧的内容高度超过右侧时，右侧的高度并不能随之而增高，而当右侧内容高于左侧时，右侧的内容就会流到左侧内容的底下去。
解决这个问题的一个办法是，给b也设置一个浮动，当然并不是设置右浮动，如果是设置的右浮动，当右侧内容少不够一行的宽度时左右两侧中间则会出现空白：
#a{float:left; width:200px; background:#aaa;}
#b{background:#f00; float:right;}
给b设置左浮动时，则可以解决中间出现空白的问题，但同样的道理，当b对象内容少不够一行的宽度时时，右侧就会出现空白：
#a{float:left; width:200px; background:#aaa;}
#b{background:#f00; float:left;}
当然有另外一种两全的解决办法，即设置b对象距离左边的位置，这样即可以达到浮动的目的也可以解决b对象内容过多而流入到a对象下面的问题：
#a{float:left; width:200px; background:#aaa;}
#b{background:#f00; margin-left:200px;}
右侧定宽左侧自适应：
与左侧定宽右侧自动一样的道理，右侧定宽左侧自动同样可以实现：
#a{background:#f00; margin-left:200px;}
#b{float:right; width:200px; background:#aaa;}
如果按照上面的代码，那么你会发现这个代码并不能实现右浮动，b对象显示在a对象的下面，并没有如预期的那样显示成右侧定宽左而自动的效果。因为HTML结构的原因，浮动DIV应该出现在没有浮动的DIV前面，也就是说，如果是按上面的代码，那么<div id=”a”>…</dia>与<div id=”b”>…</dia>的顺序应该调换一下：
<div id=”b”>开始我是在右边，后面就可能跑到左边去</div>
<div id=”a”>开始我是在左边，后面可能到右边</div>
当然，也可以在不改动HTML结构的情况下，利用CSS样式去调整浮动顺序，这也是CSS的优点之一，即可以在不改动原HTML结构的情况下，完成对页面的修改：
#a{float:right; width:200px; background:#aaa;}
#b{background:#f00; margin-right:200px;}
14 条评论
很有用，顺便问下你是用什么解决文章中直接显示代码的问题呢？
我在可视化编辑器下面直接复制代码进来的啊，没有出现什么问题。
不懂代码，纯支持两个，错过了沙了，可惜了。
浮动真的很难控制。。
特别是三列的时候。。
IE 6 跟 IE7 会有很大的出路
正好，三列浮动出炉了，哈哈哈。兼容IE6、IE7、Firefox 3哦
Nice site you have
最后两行CSS改成那样，不跟前面的一样了吗？ 就是说又变成了左侧定宽。
没能实现右侧定宽。
还有
应该是margin-roght:200px;吧。。不是margin-left:200px;
哎，真不好意思，是我的疏忽，的确是又变成了左侧定宽的了。CSS样式代码应该是：
#a{float:right; width:200px; background:#aaa;}
#b{background:#f00; margin-right:200px;}
谢谢提醒！
这个说的是很详细，有时候CSS控制的不好确实很头疼，不过我一般在处理CSS左右浮动的时候通常会把它们放到一个DIV下面，这样我觉得控制起来会稍微简单拿些
我不工作的联系页面，或者更确切地说，它清除了如何发送PM ？
下一次有人说博客，我希望谁是不会令我失望到布鲁塞尔。我说的，我知道这是我读的替代的，但是当我认为youd有一些迷人的状态。我听到的是一些唠唠叨叨的东西，你可以修复，当你werent太忙关注的搜索。