子元素定位，父元素高度自適應

現象：子元素用了position，脫離文檔流，導致父元素沒有高度。

解決方案：

1.把子元素改成浮動布局，給父元素加上overflow屬性

overflow:auto;

2.在對應的子元素上，添加相同寬高的兄弟元素，該元素去掉position屬性，把定位元素的top值換成margin或padding值。

<div id="box">
	<!--定位元素-->
</div>
<div id="box1">
	<!--后添加的元素-->
</div>

#box{
	height: 400px;
	width: 100%;
	position: absolute;
	top: 50px;
	left: 200px;
	background-color: #0066FF;
}
#box1{
	width: 100%;
	height: 400px;
	padding-top: 50px;
}

3.通過js獲取子元素的高，動態給父元素設置高度

var father = document.getElementById('father');
var son = document.getElementById('son'); father.style.height=son.offsetHeight+'px';

總結：如果是自己寫的結構建議使用第一種方案，如果是別人寫的頁面並且頁面比較復雜，可以使用第三種，第二種方案僅作為了解。