高度塌陷解决方案

<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>