<style>
#box1{
border: 3px solid red;
/* 1.解决办法(1) 开启BFC*/
/* overflow: hidden; */
}
#box2{
width: 200px;
height: 200px;
background: #cccccc;
/*添加一个浮动产生高度塌陷*/
float: left;
}
#box3{
width: 100%;
height: 300px;
background: rgb(4, 0, 255)
}
/* 3.解决办法(3) 添加伪类 设置伪类内容为空标签类型为块级清除浮动*/
.claerfix:after{
content: '';
display: block;
clear: both;
}
</style>
<div id=box1 class="claerfix">
<div id="box2"></div>
<!----2.解决办法(2) 写一个空块级标签 设置清除浮动--->
<!-- <div style="clear:both"></div> -->
</div>
<div id="box3"></div>