问题描述:如果父元素只包含了浮动元素 ,那么父元素在未设置高度的同时,则父元素高度塌缩为零;
解决方案:(使用clear属性)
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;/*//将添加去的内容作为清除浮动的对象,实现外围对象中有内容存在,因此可以自动判断高度;(告诉浮动元素说不要出现在我的两边)*/
}
</style>
</head>
<body>
<div id="box" class="clearfix">
<div id="boxa"></div>
<div id="boxb"></div>
</div>
</body>
</html>