问题：当父元素没定义高，高度由子元素撑开。所有子元素都浮动后，父元素失去高了，这就是高度塌陷。
因为所有子元素脱离文档流了。
1.这是未浮动之前。
2.这是浮动之后，父元素失去高度了。
解决方案
1.给父元素添加高度，但是不知道具体高度的时候，不能用
2.父元素也浮动，给父元素添加 float：left/right ；弊端：会影响父元素的兄弟元素，或者整体的布局，不推荐使用
3.给父元素添加overflow:hidden/auto ；弊端：可以解决，但是不推荐，溢出显示的需求不能做
4.在父级div的最后，追加一个空的子元素(块级)，给这个元素设置clear:both（推荐使用）
方法4举例：
<style type="text/css">
#parent{
background-color: #00f;
}
#child1,#child2{
width: 100px;height: 100px;
float: left;
}
#child1{
background-color: #0f0;
}
#child2{
background-color: #f00;
}
#child3{
clear: both;
}
</style>
</head>
<body>
<div id="parent">
<div id="child1"></div>
<div id="child2"></div>
<div id="child3"></div>
</div>
</body>
303
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
