使用float的时候出现的问题.
工具/原料
Pycharm
方法/步骤
1
float的半脱离文档流特性.正常来说c1是浮动元素，会把c2覆盖掉，但是不能覆盖c2的文本，有文本会把文本挤出去.这个效果用的不是太多，但是碰到这种现象要明白是因为float的半脱离文档流的特性.
2
正常流outside嵌套c1和c2浮动流，这时候下面还有一个正常流c3，c3会被c1和c2覆盖掉，这就是父级塌陷.
3
塌陷原因是，outside是空的高度为0，这时候设置outside高度与c1、c2一样可以解决问题，这种方法能解决问题但是有缺陷不好.有时候c1、c2的高度不是自己设置的，是靠内容填充起来自适应的，这时候outside高度没办法设置.
4
用清除浮动来解决塌陷.clear left：清除左浮动，左边不允许有浮动元素.clear right：清除右浮动，右边不允许有浮动元素.clear both：清除左右浮动，左右不允许有有浮动元素.clear属性只对自身起作用，不会影响其他元素.
5
outside下面在加一个子div，放在c1，c2下面，同时添加clear:both属性清除左右浮动，解决塌陷问题.
6
这里
没有任何显示的效果，只是为了CSS布局用到的，这时候不应该写到html结构里面，因为看的人看不懂这是干什么用的，所以这时候可以用befor，after伪类.这里给outside加after.7
还可以用overflow: hidden解决塌陷问题.overflow不能解决所有的塌陷问题，在很多情况下不能用，但是clearfix能解决所有塌陷问题.