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

step 1，提出问题

by zicai

HTML

<div class="container">
    <div class="left">左浮动</div>
    <div class="right">右浮动</div>
    <div class="hangout">我是正方形，我想到外面看看</div>
</div>

CSS

.container{
    border:1px solid blue;
    width: 100%;
    overflow:hidden;
}
.hangout{
    position:relative;
    top:60px;
    width: 100px;
    height: 100px;
    background:green;
}
.left{
    float:left;
    width: 50px;
    height: 50px;
    background-color:yellow;
}
.right{
    float:right;
    width: 100px;
    height: 100px;
    background-color:red;
}