解决盒子塌陷的四种方法
代码见下：
<style>
* {
margin: 0;
padding: 0;
}
.box{
border:2px solid red;
width: 400px;
background-color: aquamarine;
/* overflow：hidden可以解决浮动造成的盒子塌陷问题 */
/* overflow: hidden; */
/* height: 150px; */
}
/* 给.a 和.b 设置同一种样式 */
.a,.b {
width: 150px;
height: 150px;
background-color: aqua;
/* display: inline-block; */
float:left;
}
/* 标准流布局 */
/* float:left 脱离了标准流布局 */
/* 给父盒子造成了 盒子塌陷 */
/* 使用 display: inline-block; 会产生一条缝隙*/
/* 目前解决盒子塌陷的方法 */
/* 第一种给父盒子添加属性overflow:hidden,但是如果是下拉列表的情况，超出的会隐藏 */
/* 第二种是给父盒子固定的高度，但是子盒子变多会溢出 */
/* 第三种方式是个父盒子里面添加一个div，设置clear：both清除两边的浮动即可
但是会多出一个div元素，显得很多余 */
/* 第四种清除浮动的方法 伪类 */
.box:after{
/* content里面内容会显示到页面上 */
content: '';
display: block;
clear:both;
}
/* div 有个红色边框 里面有两个子盒子（100*100）一个红色 一个绿色 两个都是左浮动 */
/* 使用4种方法 让div 的盒子不塌陷 */
</style>
</head>
<body>
<!-- clear:both清除两边的浮动 -->
<div class="box">
<div class="a">123123</div>
<div class="b">456456</div>
<!-- <div style="clear:both;"></div> -->
</div>
<!-- <div style=" overflow:hidden;width: 200px;height: 200px;border: 2px solid blue;">
<div style="width: 250px;height: 250px;background-color: red;float:left;"></div>
<div style="width: 250px;height: 250px;background-color: red;float:left;"></div>
</div> -->
</body>
