1. 父元素高度塌陷的原因
父容器的高度是内部容器撑开的，当子元素元素浮动后，脱离了正常文档流，导致父容器的高度塌陷，高度变为0px。
2、如何清除浮动
1. overflow: hidden;
原理：BFC（Block Formatting Context）全称是块级格式化上下文。计算BFC的高度时，浮动元素也参与计算。为父元素添加overflow:hidden，使父元素具有BFC特性。
优点：简单，代码少，浏览器支持好。
缺点：必须定义width或zoom:1（含有浮动子元素的元素），不能和position配合使用，因为超出的尺寸会被隐藏。
建议：只推荐没有使用position或对overflow:hidden理解的朋友使用。
2. 结尾处加空div标签，并为其添加属性clear:both
表示在其左右两侧均不允许浮动元素
原理：添加一个空div，利用css的clear:both清除浮动，让父级div能自动获取到高度。
优点：简单，代码少，浏览器支持好，不容易出现怪问题。
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不爽。
建议：此方法是以前主要使用的一种清除浮动方法。
3. 直接为父级div定义height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单，代码少，容易掌握。
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。
建议：不推荐使用，只建议高度固定的布局时使用。
4. 父级div定义overflow:auto
原理：如果宽度是由内容自适应撑开的，则overflow: auto;
问题：撑开容器至正好显示所有内容时，如果有滚动条，则滚动条会覆盖在内容上方，导致内容宽度再次被缩小，然后出现省略号。由此推测渲染顺序：自适应宽度 → 根据高度显示滚动条 → 重新计算内部元素宽度
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
5.父级div定义伪类:after和zoom
.container: after 表示在container的内容之后插入元素，插入的元素仍在container盒子模型之中
优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）。
缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持。
建议：推荐使用，建议定义公共类，以减少CSS代码。
注：使用zoom:1是为了兼容IE6
当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。
zoom:1能够比较神奇地解决ie下比较奇葩的bug：
外边距（margin）的重叠，浮动的清除，触发ie的 haslayout属性等等。
标签：浮动,父级,元素,高度,zoom,塌陷,65,div 来源： https://blog.csdn.net/sunnnnh/article/details/118014509
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。