<style>
.par {
border: 5px solid #fcc;
width: 300px;
/*height:110px; 注意这里给外层元素设置相应高度，外层元素会包裹内层元素，并占用文档流*/
/*float:left; 或者给外层元素设置浮动，外层元素也会包裹内层元素，但不会占用文档流空间*/
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
---The code above shows the page ( inner elements cannot stretch outer elements)
---There are 2 solutions given above. The first solution is to set the height of the outer element and write it to death. If the height of the inner element changes, the outer layer element is written to death, which is not very good. The second solution, which breaks out of the document flow, is not very good. The best solution ( add overflow attribute to outer element):.par { overflow: hidden; } //清除内部浮动，外层元素par在计算高度时，par内部的浮动元素child也会参与计算。
