第三天，谈谈【清除浮动】

step 1，提出问题

by zicai

HTML

<div class="container">
    <div class="left">左浮动</div>
    <div class="right">右浮动</div>
    <!-- 给container添加一个额外的标签，并赋予样式clear:both。 -->
    <div class="clearElement"></div>
</div>

CSS

.container{
    width: 300px;
    background-color:#eee;
    border:1px solid blue;
}
.clearElement{
    clear:both;
    background:green;
    height:3px;
    /* 为了看清clear:both的效果，给该元素添加了背景色和高度。实际应用的时候要去掉高度和背景色 */
}
.left{
    float:left;
    width: 50px;
    height: 50px;
    background-color:yellow;
}
.right{
    float:right;
    width: 100px;
    height: 100px;
    background-color:red;
}