布局（三）——固定浮动布局

布局3——固定浮动布局，特点：

3. 固定浮动布局

  规格：固定大小，不能随着视窗改变

  采用：浮动布局

  兼容：兼容当前主流浏览器

实践部分

html代码

css代码

// 1.所谓固定浮动——固定大小，不能随着视窗改变

// 2.固定——设置块状width为像素值

// 3.中间两列的浮动——首先在两列下方在加一层块（div）,

//   将左导航（nav）和右内容（main）包裹在其中;

//   不然中间两列位置不能固定，会随窗口值的变化而错位。

// 4.最底层 设置好后，左右两列分别左浮动和右浮动即可。

//   需要注意的一点是：同一水平线上的宽度值的总和。

// 5.设置块的水平居中——margin:0 auto;(与{margin-left:auto;margin-right:auto;}的效果一样) 。

*{

margin:0;

padding:0;

}

body{

margin:10px;

}

#header{       // 固定浮动——宽度固定，采用像素设定

border:1px solid black;

width:600px;

height:60px;

margin:0 auto;   // 块居中

line-height:60px; // 上下居中——必须让行高填满整个header

background:#ccc;

margin-bottom:10px;

}

#header h1{

font-size:16px;

text-align:center;   //标题垂直(左右)居中

} 

#content{   //将nav和main包裹起来，防止错位

width:600px;

margin:0 auto;

}

#nav{

border:1px solid black;

width:200px;

margin-bottom:10px;

float:left;

}

#nav ul{

text-align:center;

line-height:150%;

list-style-type:none;

}

#main{

border:1px solid black;

width:380px;

margin-bottom:10px;

float:right;

}

#main p{

padding:10px;

text-indent:36px; 

letter-spacing:2px; 

line-height:150%; 

}

#footer{

clear:both;   // 清除左右浮动

border:1px solid black;

width:600px;

height:60px;

margin:0 auto;

}

#footer p{  

text-align:center;  

line-height:60px;    

}

浏览器框值正常状态下的布局显示：

浏览器框值缩小状态下的布局显示——布局 固定大小，不能随着视窗改变而改变：