1.水平方向属性
margin-right和width可被设为auto。设下的必须设为特定的值，否则会缺省为0宽度。
<div>
<p>这是一个例子</p>
</div>
div {
width: 400px;
background: gray;
}
p {
margin-left: auto;
margin-right:100px;
width:100px;
}
标签p的margin-left为400-100-100=200px，如果将margin-left的属性值设为auto，则这些格式编排属性被过紧约束时，则margin-right总被强制设成auto。（仅对从左到右阅读的语言，从右到左阅读的刚好相反）。
1.1 多于1个auto
现在来考虑一个三个属性值有两个设为auto的情况。
(1)如果两个边界均设为auto，则它们被设成相等的值，这样使其在父元素居中。适用于将块级元素居中。css中text-align只能应用于块级元素的内联内容，例如<span>，并不适合于块级元素。
(2)宽度和两边界之一被设定为auto，这种情况下，设为auto的边界降为0，与边界值为auto的边界缺省结果是一致的。然后width被设为达到总要求所需的值。
(3)如果这三个属性值均设为auto，两边界均设为0，width设为最大可能值。这个结果与不设置边界及宽度的显示声明时的缺省情况相同。在这种情况下，边界缺省为0，宽度缺省为auto。
1.2 浮动float
css中float属性也影响水平方向的布局，下面介绍其细节。
一系列特定的规则控制着浮动元素的布置，有着通常意义下的初始外观，它们是：
(1)浮动元素的左(右)外边沿也许不位于其父元素的左(右)内边沿。
即左浮动元素的外边沿向左最远可到其父元素的左内边沿；类似地，右浮动元素的外右边沿向右最远可达到其父元素的右内边沿。如图所示。
(2)浮动元素的左(右)外边沿必须在先出现于文档资源的浮动元素的右(左)外边沿的右(侧)，除非后一个元素的顶端低于前一个元素的底端。
这条规则可防止浮动元素相互重写。如果一个元素向左浮动，且已经因为早出现于文档资源而存在浮动元素，则后一个元素靠着前一个的右边沿放置。如果一个浮动元素的顶端低于所有先出现的浮动元素的底端，则可以完全浮动到父元素的左内边沿。如图所示：
(3)左浮动元素的右外边沿不能位于其右侧的右浮动元素左外边沿的右侧，右浮动元素的左外边沿不能位于其左侧的左漂移元素右外边沿的左侧。
这条规则也是为了防止浮动元素相互重叠。假定有body宽度为500px，它的全部内容是两个300px宽的图像。第一个图像向左浮动，第二个图像向右浮动。这条规则防止了第二个图像覆盖第一个图像100px。第二个图像被强制下降只至顶端低于左浮动元素的底端。
(4)浮动元素的顶端不能高于父元素的内顶端。
这条规则可防止浮动元素沿多种路径浮动到文档顶部。
(5)浮动元素的顶端不能高于先于它出现的浮动元素或段落的顶端。
这条规则可防止浮动元素沿多种路径浮动到其父元素的顶部。这样，如果div的第一个子元素是一个段落，然后又是一个段落，浮动元素的顶部不能高于先于它出现的浮动元素的顶端。
(6)一个向左(右)浮动的元素，如果其左(右)侧仍存在浮动元素，则不能够使它的右（左）外边沿处于容纳它的右（左）外边沿的右（左）侧。
2.页面布局
2.1 布局的基本概念
多栏布局有三种基本的实现方案：固定宽度、流动、弹性。
(1)固定宽度布局的大小不会随用户调整浏览器窗口大小而变化，一般是900到1100像素宽。其中960px是最常见的。
(2)流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能够更好地使用大屏幕，但同时也意味着放弃对页面某些方面的控制，比如随着页面宽度变化，文本行的长度和页面之间的位置关系都可能变化。
(3)弹性布局与流动布局类似，在浏览器窗口变宽时，不仅布局变宽，而且所有内容元素的大小也会变化。
2.2 三栏-固定宽度布局
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title> </head> <body> <div class="wrapper"> <nav> <div class="innner"> 左侧栏 </div> </nav> <article> <div class="inner"> 内容 </div> </article> <aside> <div class="inner"> 右侧栏目 </div> </aside> </div> </body> </html>
.wrapper {
width: 960px;
}
article {
width: 600px;
float: left;
padding: 10px 20px;
background: #ffed53;
}
nav {
width: 100px;
float: left;
padding: 10px 20px;
background: gray;
}
aside {
float: left;
width: 140px;
padding: 10px 20px;
background: blue;
}
说明：该例子中，wrapper的宽度960px = 600px + 20px*2 + 100px + 20px*2 + 140 + 20px*2，根据1.2的浮动规则，可知，article、nav、aside可在同一栏显示，之所以在这三个标签内加入class=inner的div，是将三个标签的内容包容在标签内。这样做有什么用处呢？
假设标签article内有一段文字，同时我们希望这段文字距离左侧有个margin为20px，这时，如果没有class=inner的div，我们直接在article设置margin，这时三个标签的边界+内容>960px,而根据float规则，浮动的元素不能超过父元素的最右内边沿，如果超过则将其压到顶端低于左浮动元素的底端，同时到达父元素的最左内边沿。显然，三个标签就不能在同一栏显示了。
而将内容放置于inner内，设置inner的margin属性值，则可满足要求，同时不影响布局。
2.3 三栏-中栏流动布局
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title> </head> <body> <div class="wrapper"> <div class="three-wrapper"> <div class="two-wrapper"> <nav> <div class="innner"> 左侧栏 </div> </nav> <article> <div class="inner"> 内容 </div> </article> </div> <aside> <div class="inner"> 右侧栏目 </div> </aside> </div> </div> </body> </html>
.wrapper {
width: 100%;
}
.three-wrapper {
width: 100%;
float: left;
background: #ffed53;
}
.two-wrapper {
width: 100%;
float: left;
margin-right: -210px;
background: gray;
}
aside {
float: left;
width: 210px;
background: blue;
}
nav {
float: left;
width: 160px;
}
article {
width: auto;
margin-right: 210px;
margin-left: 160px;
}
说明：将左侧两栏包裹在two-wrapper中，设置其宽度为父元素宽度，这时，将其向左浮动，则占据整个一栏。再给其margin-right预留-210px。然后aside向左浮动。根据浮动规则，aside的最左沿不得超过前一个浮动元素的最右沿，所以，aside到达距three-wrapper的div的右侧210px处(因为aside的盒子宽度小于210px，所以能达到一栏，如果大于210px，则下一行浮动）。这时，two-wrapper与aside位于同一栏，然后再设置nav的宽度并向左浮动，剩下就只剩article了。article在two-wrapper中，应距离two-wrapper右侧有210px的margin(因为这个margin已经给了aside)。
2.4 拓展
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title> </head> <body> <div class="wrapper"> <div class="buju"> <div class="right"> <div class="test"> 右侧 </div> </div> <div class="left"> 左侧 </div> </div> </div> </body> </html>
.buju {
width: 100%;
float: left;
background: gray;
}
.left {
width: 100px;
float: right;
background: red;
}
.right {
float: right;
width: 100%;
margin-left: -100px;
}
.test {
background: blue;
margin-left: 100px;
width: auto;
}