清除浮动
#清除浮动
~-------------------------------------------------------
开发工具与关键技术：dw css3
作者：熊 强
撰写时间： 2019/02/10
~------------------------------------------------------
复习一下如何清除浮动
<body>
<div class="qcfd">
<div class="diyi"></div>
<div class="dier"></div>
<div class="disan"></div>
</div>
</body>
这是HTML代码
.qcfd{
height: 1000px;
}
.diyi{
width: 200px;
height: 200px;
background: red;
float: left;
}
.dier{
width: 200px;
height: 200px;
background: blue;
float: right;
}
.disan{
width: 200px;
height: 200px;
background: rgba(173,32,34,1.00);
}
这是css代码
这是得到的结果
第三个因为受了浮动影响 看不到了
当我们清除浮动后
.disan{
width: 200px;
height: 200px;
background: rgba(173,32,34,1.00);
clear: both;
}
得到的结果是这样的
第三个图形已经可以看见了
完成了