本文以三栏-固定宽度布局为例说明由设定边距引起的“浮动滑移”问题怎么解决。
固定宽度布局必须将设定好每一栏的宽度。
下面看一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>布局</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#wrapper {
width: 960px;
margin: 0 auto;
border: 1px solid;
}
header {
text-align: center;
}
nav {
width: 150px;
float: left;
background: #D5D5D5;
}
nav li {
list-style-type: none;
}
article {
width: 600px;
float: left;
background: #EEF2F8;
}
aside {
width: 210px;
float: left;
background: #D5D5D5;
}
footer {
text-align: center;
background: #9C4E00;
}
footer {
clear: both;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<p>这是标题</p>
</header>
<nav>
<div>这是左栏，宽150px</div>
</nav>
<article>
这是中栏，宽600px。本文以三栏-固定宽度布局为例说明由设定边距引起的“浮动滑移”问题怎么解决。
</article>
<aside>这是右栏，宽210px</aside>
<footer>
<p>页脚来啦</p>
</footer>
</div>
</body>
</html>效果是这样的：
但是这样的效果实在太挤了，我想设置间距，比如给中栏设定左右外边距为10px：
article {
width: 600px;
float: left;
background: #EEF2F8;
margin: 0 10px; /*增加这一行*/
}可是效果却变成这样：
右栏跑到左栏的下面了。
这就是“浮动滑移”问题，因为根据盒模型，为固定宽度的元素添加水平外边距、边框和内边距，会导致元素盒子变宽。
右栏由于剩余宽度不够就躲到左栏下面去了。
这种情况怎么解决呢？
有三种方法：
1.重设宽度以抵消内边距和边框。需要精确计算，稍一调整内边距或边框就有可能导致布局错乱。
这种方法不实用，重点看下面的。
2.给容器内部的元素应用内边距和边框。前提是这些元素没有明确设定宽度，这样它们的内容才会随着内、外边距的增加而缩小，否则反而会增加元素盒子的宽度。所以与其为容器中的元素添加内、外边距，不如在栏中再添加一个没有宽度的div，让它包含所有内容元素，然后再给这个div应用边框和内边距。（这就是那些实例中经常会莫名其妙多一个嵌套div的原因。）
修改上述代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>布局</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#wrapper {
width: 960px;
margin: 0 auto;
border: 1px solid;
}
header {
text-align: center;
}
nav {
width: 150px;
float: left;
background: #D5D5D5;
}
nav .inner {
padding: 0 10px;
}
nav .inner ul {
margin: 5px 0;
padding: 0;
}
nav li {
list-style-type: none;
}
article {
width: 600px;
float: left;
background: #EEF2F8;
}
article .inner {
margin: 10px;
border: 2px solid red;
padding: 20px;
}
aside {
width: 210px;
float: left;
background: #D5D5D5;
}
footer {
text-align: center;
background: #9C4E00;
}
footer {
clear: both;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<p>这是标题</p>
</header>
<nav>
<div class="inner">
<div>这是左栏，宽150px。</div>
<ul>
<li>li_1</li>
<li>li_2</li>
<li>li_3</li>
</ul>
</div>
</nav>
<article>
<div class="inner">这是中栏，宽600px。本文以三栏-固定宽度布局为例说明由设定边距引起的“浮动滑移”问题怎么解决。</div>
</article>
<aside>这是右栏，宽210px。</aside>
<footer>
<p>页脚来啦</p>
</footer>
</div>
</body>
</html>红色部分就是增加的代码。
效果如下：
是不是既有间距，又正常布局了？
3.使用box-sizing:border-box。只要在浮动栏的css规则中分别加上box-sizing:border-box声明，再给栏添加内边距和边框就不会导致盒子的宽度变化了。此时内容会随内边距收缩。但是IE不支持这个属性，有一个专门解决这个问题的脚本文件：borderBoxModel.js。你可以使用条件注释（以便只有IE6和IE7加载）把它添加到HTML标记之后、结束的</body>标签之前，以保证在加载DOM之后再执行该脚本：
<body>
<!-- HTML标记-->
<!-- 只让IE8之前的IE加载它-->
<!--[if lt IE 8 ]>
<script src="helpers/borderBoxModel.js"></script>
<![endif]-->
</body>
我用firefox测试，好像也不支持box-sizing属性，所以还是慎用吧。
解决由设定边距引起的“浮动滑移”问题,布布扣,bubuko.com
原文：http://blog.csdn.net/whoami021/article/details/19909383
