如果父元素只包含了浮动元素 ，那么父元素在未设置高度的同时，则父元素高度塌缩为零;
1.创建一个用来清除浮动的css样式类（.clearfix）
2.针对包裹的全是浮动元素的父级容器使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{border: 10px solid red;}
#boxa{width: 30%; height: 40px;float: left; background: #ADFF2F;}
#boxb{width: 70%; height: 40px;float: left;background: #00FFFF;}
.clearfix{zoom:1}/*//IE浏览器的专用属性（针对IE*/）
.clearfix:after{/*//伪对象选择符 （在这个对象被浏览器渲染后添加一定的内容）*/
content:".";/*//添加内容写在这里的属性值 这个属性是专门配合伪类对象,必须写;*/
display:block;/*//将添加的内容转换为块级元素*/
visibility:hidden;/*//可视化属性；控制元素是否可见;无论是否可见，保留物理空间；和display属性不同;*/
height:0;/*//将添加进去的内容的高度设置为0；消除其占位；*/
clear:both;/*//将添加去的内容作为清除浮动的对象，实现外围对象中由内容存在，因此可以自动判断高度;*/
}
.clearfix:after{
content: "x";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
</style>
</head>
<body>
<div id="box" class="clearfix">
<div id="boxa"></div>
<div id="boxb"></div>
</div>
</body>
</html>