猜想:float是不继承的,给元素添加float属性实际上是把元素从标准文档流中抽离出来了,而其内部的所有元素仍然在标准文档流中。所以给所有元素都添加float能够消除坍塌效果。(因为添加float属性相当于把元素从一个集合拿到了另一个集合,而两个集合都是符合标准文档流的)


0.外部盒子塌陷了

左浮动盒。。。
右浮动盒。。。盒子里内容很多很多很多

1.给外部盒子也添上float属性

左浮动盒。。。
右浮动盒。。。盒子里内容很多很多很多

2.在外部盒子内最下方添上带clear属性的空盒子

左浮动盒。。。
右浮动盒。。。盒子里内容很多很多很多
空盒子

3.用最简单的浮动清除方法<br style="clear:both;" />

左浮动盒。。。
右浮动盒。。。盒子里内容很多很多很多


3.用overflow:auto恢复塌陷的盒子

左浮动盒。。。
右浮动盒。。。盒子里内容很多很多很多

4.用after伪元素清除浮动

左浮动盒。。。
右浮动盒。。。盒子里内容很多很多很多


给外部盒子中的文字添上p标签是因为在Chrome中div中的text节点内容会随意换行