子元素浮动对父元素的影响（高度塌陷）

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/suandfei/article/details/100637915

出现原因：

父元素没有设置宽度和高度，完全是由子元素内容撑起来的，一旦子元素浮动也就是脱离文档流。浏览器渲染时，就好像父元素里面没有内容了。所以就会出现高度塌陷问题。

解决方案

1. .给父元素设置height
2. 给父元素设置 overflow：auto/hidden
3. 设置父元素 浮动 float:left/right
4. 在所有子元素后面加一个空的table 标签 然后为其设置 clear：both