前一段时间自己弄了个页面，发现页面在IE6中出现float: right;后换行的问题(万恶的IE盒模型)，一直没时间解决，今天正好有时间解决下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<title>
捷科网
</title>
<style>
#wrapper {
width: 990px;
margin: 0px auto;
text-align: left;
padding: 0 4px;
margin-bottom: 20px;
background: #F9F9F9;
}
#spaceRight {
word-wrap: break-word;
float: right;
width: 766px; #1 这里我们可以去掉10px
}
#spaceLeft {
float: left;
width: 220px;
}
.content {
float: left;
width: 724px;
margin: 0 0 0 10px; #2 这里我们可以去掉
border: 1px solid #EEE;
padding: 10px 15px;
background: white;
word-wrap: break-word;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="spaceRight"></div>
<div id="spaceLeft"><div class="content"></div></div>
</div>
</body>
</html>
这里我们用到了固定宽度的布局，在IE6中spaceRight会换行（可以查看IE的盒模型了解原因），通过上面的css，我们可以看到spaceRight紧贴spaceLeft, 而content会有10px的左外边距，这个时候在IE中就会导致换行，这里实际上我们可以通过一个小技巧来达到同样的效果，我们可以减少10px的spaceRight宽度, 去掉content中margin-left的10px，这个时候页面效果跟前一种一样，但解决了IE6中换行的问题（因为spaceRight预留了一些宽度防止IE盒模型）.
可能大家同样注意到spaceRight div 在spaceLeft div的前面，这里实际上是另一个技巧。spaceLeft向左浮动，spaceRight向右浮动，所以不影响布局，但因为spaceRight在前，会先加载，这样在一些屏幕阅读器（屏幕比较小）上就会把重要/主要内容显示在开头，而不用用户不断下拉才能看到想要的内容，用户体验更好
源地址：http://thejtechs.com/blogDetail/91/div-css-float-right
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
