Day2:进入新手村前先让我复习一下QQ-CSS-clear 清除浮动

clear 清除浮动
浮动元素顾名思义就是浮动在版面之上，所以如果接着顺序往下写的程序码没有使用clear清除浮动的话，画面会重叠，如果後面的元素不打算做浮动元素的话，可以写上clear语法

比如说

<div class="header">表头</div>
<div class="menu">选单</div>
<div class="content">内容</div>
<div class="footer">页底</div>

CSS

.header{
    height: 50px;
    width: 800px;
    background-color: blue;
}
.menu{
    height: 50px;
    width: 300px;
    background-color:green;
    float:left;
}
.content{
     height: 50px;
     width: 300px;
     background-color:red;
     float:left;
}
.footer{
    height: 60px;
    width: 800px;
    background-color: yellow;
}

以上是没有使用clear语法的程序码，结果会如下图

<div class="header">表头</div>
<div class="menu">选单</div>
<div class="content">内容</div>
<div class="clearfix"></div>
<div class="footer">页底</div>

CSS

.header{
    height: 50px;
    width: 800px;
    background-color: blue;
}
.menu{
    height: 50px;
    width: 300px;
    background-color:green;
    float:left;
}
.content{
     height: 50px;
     width: 300px;
     background-color:red;
     float:left;
}
.clearfix{
    clear: both;
}
.footer{
    height: 60px;
    width: 800px;
    background-color: yellow;
}

以上是使用clear语法的程序码，结果如下图