4.10.1 总体布局

盒子元素是不会和别的元素共享同一行的。
介绍一种新的规则float（漂浮）。它的效果就相当于元素漂浮在上一层，漂浮的盒子元素是可以在同一行的。
漂浮主要是左漂浮和右漂浮：
float:left;
float:right;
如果一个元素左边漂浮，那么它后面接着的元素就会顶上来：
<div style="height:150px;width:200px;background:#eee;float:left">
    漂浮的元素
</div>
<div style="height:180px;width:400px;background:#ccc">
    未漂浮的元素
</div>
看效果图可以看到，后面的元素顶了上去，漂浮的元素犹如浮动了起来，如果后面未漂浮的元素更小，那么它就会被漂浮的元素盖住，完全看不到了。利用漂浮定位的时候经常会出现的问题。
如果两个元素漂浮，那么它们就会排列起来：
<div style="height:100px;width:150px;background:#eee;float:left">
    漂浮的元素1
</div>
<div style="height:100px;width:150px;background:#ccc;float:left">
    漂浮的元素2
</div>
效果图可以看到，两个元素并排在一起了。这里宽度设置为150px一个，如果设置宽度值太大，会因为两个div的宽度之和超过父元素宽度而转行。
我们先来完成这样的一个布局

<!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>
.div-main{
    width:100%;
    margin:0 auto;
}
.top {
    background:#000;
    color:#FFF;
    height:10vh;
}
.left {
    background:#ccc;
    width:20%;
    height:80vh;
    float:left;
}
.right {
    width:80%;
    height:80vh;
    background:orange;
    float:left;
}
.bottom {
    background:#000;
    color:#FFF;
    
    height:10vh;
    clear:both;
}
</style>
</head>
<body>
<div class="div-main">
    <div class="top">
        我是顶端
    </div>
    <div class="left">
        我是左下
    </div>
    <div class="right">
        我是右下
    </div>
    <div class="bottom">
        我是底部
    </div>
</div>
</body>
</html>
高度的单位vh，80vh是指高度占80%，从上到中间到下面，的高度和刚好是100vh。
.bottom里面最后有一条规则clear:both,这是为了防止底部顶上去（因为它上面的两个元素漂浮了。）
main-div作为整体，设置宽度和居中（margin:0 auto）