网页布局基础第三次（浮动布局）

清楚浮动

清除浮动的方法：
对受到影响的元素设置如下属性
1、为元素设置clear属性——clear:both;、clear:left;或者clear:right;
2、同时设置100%(或固定宽度【固定宽度可能有问题】)+overflow:hidden;
2的width设置为100%就是继承父容器的宽度。左右撑满整个容器，为自己清除浮动创建条件。再加溢出隐藏，就可以把包裹浮动的部分去除。

横向两列布局的实现：这是网页布局最常见的方式之一
主要应用技能：
float属性——使纵向排列的块级元素，横向排列
margin属性——设置两列之间的间距

clear：both，主要用于对紧邻其后元素的清除浮动；
width：100%;overflow：hidden，主要用于浮动对父包含块的影响

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
}
#wrap {
    background:#00C;
    margin:0 auto;
    width:960px;
}
#header {
    background:#FF3300;
    width:100%;
}
#mainbody {
        background:#FC0;
        width:100%;
        overflow:hidden;
}
.left {
    width:800px;
    height:200px;
    background:#000;
    float:left;
}
.right {
width:140px;
height:500px;
background:#690;
float:right;;
}
#footer {
    background:#639;
    width:100%;
}
</style>
</head>

<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>
</html>