解决由设定边距引起的“浮动滑移”问题

最新推荐文章于 2024-10-04 21:26:09 发布

heyneo

最新推荐文章于 2024-10-04 21:26:09 发布

阅读量1.8k

点赞数

分类专栏： css 文章标签： css 布局浮动滑移

本文链接：https://blog.csdn.net/whoami021/article/details/19909383

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文以三栏-固定宽度布局为例说明由设定边距引起的“浮动滑移”问题怎么解决。

固定宽度布局必须将设定好每一栏的宽度。

下面看一个例子：

<!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之后再执行该脚本：