<html>
<head>
<title>子容器设置浮动后撑不开父容器的解决方法</title>
<style>
/*
子容器设置为浮动后会丢失display:block,和clear:both;
下面几种方法可以解决子容器浮动后撑不开父容器的的问题：
1. 设置父容器为display:inline-block;
2. 设置父容器float
3. 在父容器的结束标签后面添加<div style='clear:both'></div>
4. 网上还有一个伪对象方法,试了一下,在ie6,ie7中不理想,,就不写出来了
*/
* { margin:0; padding:0;}
.father { border:1px solid gray; float:left; /*display:inline-block*/ }
.son { float:left; height:100px; border:1px solid red}
</style>
<head/>
<body>
<div class="father">
<span style="color:gray">我是父容器</span>
<div class="son"><span style="color:red">我是子容器</span></div>
<!--<div style="clear:both;"></div>-->
</div>
<div>我在这..........</div>
</body>
</html>
