<html>
<head>
<meta charset="utf-8">
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
*{margin: 0padding: 0}
.inbox{height: 100pxbackground: #DCDCDC}
</style>
<body>
<div class="box"><!--父级元素未设置高度，box的高度是被包含元素inbox“撑开”的-->
<div class="inbox">
子元素
</div>
</div>
<script>
$(function(){
var boxH = $('.box').height()
var inboxH = $('.inbox').height()
alert("box的高度"+boxH+"px\n"+"inbox的高度"+inboxH+"px")
})
</script>
</body>
</html>
最开始就是这样子啦，可是我脑子一热，想让b浮动(工作中确实会遇到这种情况)，然后float:left，发现父元素没高度了(看起来就像父元素没了)。
就像这样子：
(其实我最开始是发现给了个border-bottom属性，它跑去顶部了)
这种情况，给父元素一个height值就可以了，可是我不能给它一个固定的高度，我想让它随内容的高度变化。
怎么办呢。
诶，我想到一个办法：
我在父元素最后添加了一个空的元素c，用c清空左右浮动，就又回到最开始的效果了，而且动态添加其他元素的话，父元素高度也会像开始那样随之变化了。
1、首先新建一个html文件，命名为test.html。
2、在test.html文件内，使用p标签创建两行文字，代码如下。
3、在test.html文件内，设置第一个p标签id属性为mp，主要用于下面使用css设置该p元素隐藏。
4、在test.html文件内，编写标签<style type="text/css"></style>，下面将在标签内编写css样式。
5、在css标签内，使用css设置p标签的行高为30px，在浏览器运行test.html。
6、在css标签内，对id为mp的p元素样式进行单独定义，通过dispay属性设置为none，实现该p元素隐藏不可见。
7、最后在浏览器打开test.html文件，查看实现的效果。
