|
;>
<div id="header"></div>
<div id="mainbody"></div>
<div id="footer"></div>
</div>
注：如果又同时设置了 float 属性或者绝对定位属性（ position 为 absolute 或 fixed ），那么肯定就没有居中效果了。
横向多列布局
浮动布局及float属性
标准文档流中默认块级元素是从上到下依次纵向排列的。
而浮动布局就可以实现块级元素的横向布局了
float 元素的三个值： left 、 right 、 none 。- 设置了
float 属性的元素脱离了标准文档流，但仍占据位置空间，会对周围的元素产生影响。
- 当元素没有设置宽度值，而又设置了浮动，那么元素的宽度随内容的变化而变化。
- 当元素设置浮动属性后，会对紧邻在后面的元素产生影响（如宽度等）。
清除浮动及常用方法
设置浮动会导致紧邻其后的元素被影响，有时甚至会影响布局，变成我们不是想要的样子。
这时候就需要对受到浮动影响的元素“清除浮动”。
clear 属性 --- 为元素设置 clear 属性，常用 clear: both; 。而 clear: left; 和 clear: right; 也是可以的。- 固定宽度
width + overflow: hidden ，将宽度设置为固定值比如 100% 等，并将溢出属性设置为隐藏。
- 空标签（如
<br /> ）无意义，不建议用来清除浮动；且清除的行高可能不同。
注意：
当父包含块没有设置浮动，而它内部的子元素设置了浮动，这种情况下父元素同样受到浮动的影响，子元素不再被父元素包裹了，它的高度不会扩展为子元素的最大高度。这时若要清除浮动，需要设置 overflow: hidden 来把浮动元素包裹起来。
用浮动属性实现横向两列布局
float 属性 --- 使块级元素横向排列
margin 属性 --- 设置两列之间的间距
<style type="text/css">
* { margin:0; padding:0; }
#wrap {
margin:0 auto;
background:#00F;
width:360px;
}
#header { background:#FAC; }
#mainbody { background:#ACF; overflow: hidden; }
#footer { background:#AFC; }
.left {
width:200px; height:100px;
background:#0AC;
float: left;
}
.right {
width:140px; height:150px;
background:#AC0;
float: left;
}
</style>
<body>
<div id="wrap">
<div id="header">头部</div>
<div id="mainbody">
<div class="left"></div>
<div class="right"></div>
</div>
<div id="footer">版权部分</div>
</div>
</body>
绝对定位布局
什么是绝对定位布局？
绝对定位布局是通过设置 position 属性实现的。
除了能够实现横向多列布局及较为复杂的定位，如
- 带有遮罩层效果的提示框；
- 固定层效果（如固定的导航栏）；
- 全屏广告（也算是遮罩层效果）等。
position 属性有3种定位形式：
static --- 静态定位relative --- 相对定位absolute --- 绝对定位fixed --- 固定定位
其中 absolute 和 fixed 都属于绝对定位的形式。
相对定位
相对定位有如下特点：
- 相对定位是相对于自身原有位置进行偏移；
- 相对定位的元素仍处于标准文档流当中；
- 相对定位后即可以设置偏移属性（
left 、 top 、 right 、 bottom ）以及 z-index 属性。
relative 更稳定，且不脱离文档流，可以用作设置了 absolute 的元素的父包含块。
绝对定位
绝对定位有如下特点：
- 绝对定位是相对于其包含块为基准的定位；
- 绝对定位的元素完全脱离了标准文档流；
- 绝对定位后即可以设置偏移属性（
left 、 top 、 right 、 bottom ）以及 z-index 属性；
- 如果未设置固定宽度，则绝对定位的元素随内容宽度变化而变化。
未设置偏移量的情况：
- 无论是否有已定位的祖先元素，都保持在元素初始位置；
- 完全脱离了标准文档流。
设置了偏移量的情况：
- 无已定位的祖先元素，则以根元素
<html> 为偏移参照基准（而非 <body> ）；
- 有已定位的祖先元素，则以距其最近的已定位祖先元素为偏移参照基准。
用绝对定位实现横向两列布局
使用绝对定位实现横向两列布局的应用比较少；
一般常用于一列固定宽度，另一列宽度自适应的情况；
要点：
relative --- 父元素相对定位；absolute --- 自适应宽度元素绝对定位；- 由于绝对定位脱离文档流，需要 固定宽度列的高度 > 自适应宽度的列的高度。
<style type="text/css">
* { margin:0; padding:0; }
#wrap {
margin:0 auto;
background:#AAC;
width:360px;
}
#header {
background:#FAC;
height:50px
}
#mainbody {
background:#ACF;
position:relative;
margin-top:5px;
}
#footer { background:#AFC; }
#sidebar {
width:50px; height:200px;
background:#0AC;
}
#content {
width:300px; height:150px;
background:#AC0;
position: absolute;
left: 60px; top: 0px;
}
</style>
<body>
<div id="wrap">
<div id="header">头部</div>
<div id="mainbody">
<div id="sidebar"></div>
<div id="content"></div>
</div>
<div id="footer&q
|